gulpでSassが自動コンパイル（watch）できないときの対処法

gulpをインストールしてSassをwatchで自動コンパイルしようとしていたのですが、エラーが出てうまくできない、調べても解決法がなかなか出てこないという事態になったので、解決法を紹介します。

おかしい部分が特にないのにwatchができないなら、おそらく多くの人が僕と同じ原因だと思います。

gulpでSassのwatchが更新されない原因

結論から言うと、原因はgulpのバージョンによるgulpfile.jsの書き方の違いです。

gulpは2018年12月以降だとv4以上がインストールされます。

しかし、gulpfile.jsの書き方がv3の場合、書き方の違いが原因でエラーになるのです。

特にネット記事を参考にしながらインストールした人は古い記事を参考にしていて、gulpはv4なのにgulpfile.jsはv3の書き方で書いてあるみたいな感じだと思います。

というわけでまずはバージョンを確認してみてください。

gulp -v
CLI version: 2.2.0
Local version: 4.0.2

Local versionが4.x.xを表示された人はwatchは以下の書き方になります。gulpfile.jsにコピペしましょう。

gulp.task('default', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

3.x.xと表示された人は以下の書き方になります

gulp.task('default', function(){
  gulp.watch('./sass/**/*.scss', ['sass']);
});

バージョンによって書き方が少し違うのがわかると思います。エラーの原因はコイツです。

またこの2つの書き方の場合、

なので.sassファイルはsassフォルダ内に入れておきましょう。

コンパイルするフォルダを変えるには'./sass/**/*.scss'の部分を修正しましょう。

例えば'./src/sass/**/*.scss'とすると、

watchの起動の仕方の前に、gulpにおけるタスクの起動の仕方を知っておくと何かと便利です。

例えば以下のような書き方です。

gulp.task('sass-watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

タスクの登録はgulp.task('タスク名', function() { //処理 });という書き方をします。

gulpのタスクはターミナル上で、gulp タスク名という入力することで起動できます。

なので上のコードの場合、gulp sass-watchと叩けばwatchが起動します。

書き方はもう1つあり、「default」を指定する場合です。

gulp.task('default', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

defaultを指定したタスクはgulpコマンドだけで起動できるようになります。

なので上のコードの場合はターミナル上でそのままgulpと叩けばwatchが起動します。

タスク名は任意の名前を設定できます。

watchよく使うのではdefaultで起動できるようにして、その他たまに使うタスクがあれば短い名前を指定しておくと使いやすいと思います。

前置きが長くなりましたが、今回最初に紹介したコードならgulpコマンドでそのままwatchを起動できます。

gulp.task('default', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

watchを起動させておくと.sassファイルを保存するた度に指定したフォルダに自動でCSSにコンパイルされます。

基本的にwatchはつけっぱなしにしておくとよきです。

gulpやSassの勉強には以下の本がとても参考になりました。

使い方はもちろん、便利なプラグインやSassの設計の仕方を初心者にもわかりやすく解説してあります。

created by Rinker

gulpでSassが自動コンパイルできない原因はgulpのバージョンによるgulpfile.jsの書き方の違いによるものでした。

バージョンの違いのせいでエラーになることが頻繁に起こるかはわからないですが、エラーが起きたらバージョンによる食い違いを疑ってみるのもいいと思います。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！