TakahiroNakamori

TakahiroNakamori

中森崇博(ナカモリタカヒロ)

03
 

GulpでSass

【作成日】 2021/08/05 13:30  【更新日】 

Sass とは CSS を効率的に管理するために CSS を拡張したものと解釈しています。
Sass を利用して CSS を管理する方法はいろいろあるが、Node.js + gulp で Sass 環境を構築します。
Node.js のバージョンは v14.11.0, sass のバージョンは 1.37.5 です。

1.Gulp のインストール

ターミナル(Mac)で以下をインストールします。

コマンドコピーしました
npm install -g gulp-cli
npm install -g gulp-sass
npm install -g gulp-concat
npm install -g gulp-clean-css
npm install -g gulp-rename

自分の環境では -g でインストールしても使えなかったので、全部ローカル環境にインストールしています。

npm install gulp-cli
npm install gulp-sass
npm install gulp-concat
npm install gulp-clean-css
npm install gulp-rename

2.プロジェクトディレクトリに移動して Node.js が使えるようにする

ターミナル(Mac)でプロジェクトディレクトリに移動します。

cd ディレクトリ

ターミナル(Mac)で初期化コマンドを入力します。

コマンドコピーしました
npm init -y

CSS ファイルを出力するディレクトリ、CSS を管理する scss ファイルを置くディレクトリを決めます。
以下はその例。
gulpfile.js は Gulp コマンドを実行するためのファイル。

project-name/
├── assets
│   ├── scss
│   │   ├── ***.scss
│   │   └── ... 
│   └── css
│       └── style.css
├── gulpfile.js
├── ...

3.gulpfile.js に処理を書く

scss ディレクトリ内の全ての scss ファイルを style.css にまとめて、圧縮したものを style.min.css で複製して、css ディレクトリに出力する場合の処理を例にすると以下のような処理になります。

gulpfile.jsコピーしました
var gulp = require('gulp');
var clean = require('gulp-clean-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', done => {
  return gulp.src('./assets/scss/*.scss')
    .pipe(sass())
    .pipe(concat('style.css'))
    .pipe(clean())
    .pipe(rename({
      extname: '.min.css'
    }))
    .pipe(gulp.dest('./assets/css'));
});
 
gulp.task('log', done => {
  console.log("DONE")
  done()js
});

gulp.task('watch', () => {
  gulp.watch('./assets/scss/*.scss',gulp.series('sass','log'));
});

gulp.task('default',
  gulp.series('watch')
);

4.Gulp で監視開始

ターミナル(Mac)で以下のコマンドを実行します。

コマンドコピーしました
gulp watch

ターミナル(Mac)で以下のような表示になったら監視されています。

[22:49:13] Using gulpfile ~/Documents/.../gulpfile.js
[22:49:13] Starting 'watch'...

scss ファイルを上書き保存する度に、style.css と style.min.css ファイルが上書き保存されます。