gulp を使って自動でsass をコンパイルできるようにする

一体何番煎じになる記事だろうか…。
gulp を使ってsass を自動コンパイルできるようにした。

【重要】追記(2022/01/02)

gulpfiles.js で「gulp.task～」を使って記述する方法は、2018年12月から非推奨になっているため、この記事は参考程度に読んでください。というのを3年位経った2022年に気づきました…。
別途記事を投稿する予定です。

事前準備

gulp を使えるようにするには、予め以下をインストールする必要がある。

• node.js
• Ruby
• sass

これらのインストールについてはOS によって異なるため、省略。
(2019年3月22日削除)

npm init

node.js インストール後、gulp をインストールしたいディレクトリで以下のコマンドを実行する。

npm init

特に指定がない場合、そのままEnter/Return を押せばよい。
その後、package.json が生成される。

gulp のインストール

以下のコマンドを実行してgulp をインストールする(グローバルと開発用)。

.zsh

npm install gulp -g

.zsh

npm install gulp --save-dev

gulp-sass も必要になるため、以下のコマンドを実行させてインストールする。

.zsh

npm install gulp-sass --save-dev

gulpfile.js の設定

gulpfile.js を作成し、.scss ファイルの格納場所やコンパイルしてできた.css ファイルをどこに出力させるか、などの設定を記述する。

今回の記述例は以下のとおり。参考URL をとても参考にした。

.js

const gulp = require('gulp');
const sass = require('gulp-sass');

// sassとcssの保存先
gulp.task('sass', function(){
    gulp.src('./sass/**/*.scss')
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(gulp.dest('./css/'));
});

//自動監視
gulp.task('sass-watch', ['sass'], function(){
    var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
    watcher.on('change', function(event) {
    });
});

gulp.task('default', ['sass-watch']);

gulp をコマンドで起動すると自動で.scss ファイルの監視が始まる。
sass ディレクトリに作成された.scss ファイルが編集されて更新された時、自動でコンパイルして.css を生成する。css ディレクトリにコンパイルした.css ファイルを出力するようにしている。出力された.css ファイルは、expanded 形式で出力。

gulp の起動

package.json があるディレクトリ内で以下のコマンドを実行すると、.scss ファイルの自動監視が始まる。

% gulp
[17:18:43] Using gulpfile ~/hoge/gulpfile.js
[17:18:43] Starting 'sass'...
[17:18:43] Finished 'sass' after 6.81 ms
[17:18:43] Starting 'sass-watch'...
[17:18:43] Finished 'sass-watch' after 11 ms
[17:18:43] Starting 'default'...
[17:18:43] Finished 'default' after 21 μs

参考URL

ありがとうございました。
https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a