はじめに
こんにちは。
私は、Sassファイルをコンパイルする時に、Gulpというタスクランナーを使ってファイルを監視し、変更があった時に自動でコンパイルする方法を採っています。
最近、複数のSassファイルを使うようになり、監視する対象を増やす方法を探していました。そこで見つけた方法を備忘録として残したいと思います。
実行環境
| 項目 | Ver |
|---|---|
| Node.js | v20.16.0 |
| Gulp | CLI v3.0.0 / Local v5.0.0 |
| Sass | v1.77.8 |
| dart2js ※DartSass | v3.4.4 |
既存のGulpファイル
既存のGulpファイルでは、style.scssを監視して、変更があった時に自動コンパイルされます。
これを複数のSassファイルを監視できるように修正していきます。
gulp.js
const gulp = require('gulp'); //gulpモジュールをインポート
const sass = require('gulp-sass')(require('sass')); //gulp-sass、sassモジュールをインポート
//Sassをコンパイルするタスクを定義
gulp.task('sass', () => { //sassというタスクを定義
return gulp.watch('./CSS/style.scss', () => { // style.scssを監視
return (
gulp
.src('CSS/style.scss') //style.scssを取得
.pipe( //取得したstyle.scssをsass()メソッドに渡す
sass({ //CSSファイルにコンパイル
outputStyle: 'expanded', //CSSがインデントされた形式で出力
})
// コンパイルエラーをログに表示
// ※エラーが発生してもタスクが停止しないようにしている
.on('error', sass.logError)
)
.pipe(gulp.dest('CSS')) //コンパイルされたファイルをcssフォルダに格納
);
});
});
監視対象をファイル名で指定する方法
まずは、適当にwatchListという名前で配列を定義して、監視対象を追加していきます。
gulp.js
+ const watchList = [
+ 'CSS/style.scss',
+ 'CSS/module/_header.scss',
+ 'CSS/module/_main.scss',
+ 'CSS/module/_footer.scss'
+ ];
次にwatchメソッドの第一引数に、配列watchListを渡します。
これで監視対象のファイルに変更があった時にコンパイルされます。
変更後のGulpファイルは以下になります。
gulp.js
const gulp = require('gulp'); //gulpモジュールをインポート
const sass = require('gulp-sass')(require('sass')); //gulp-sass、sassモジュールをインポート
+ const watchList = [
+ 'CSS/style.scss',
+ 'CSS/module/_header.scss',
+ 'CSS/module/_main.scss',
+ 'CSS/module/_footer.scss'
+ ];
//Sassをコンパイルするタスクを定義
gulp.task('sass', () => { //sassというタスクを定義
- return gulp.watch('./CSS/style.scss', () => { // style.scssを監視
+ return gulp.watch(watchList, () => { // style.scssを監視
return (
gulp
.src('CSS/style.scss') //style.scssを取得
.pipe( //取得したstyle.scssをsass()メソッドに渡す
sass({ //CSSファイルにコンパイル
outputStyle: 'expanded', //CSSがインデントされた形式で出力
})
// コンパイルエラーをログに表示
// ※エラーが発生してもタスクが停止しないようにしている
.on('error', sass.logError)
)
.pipe(gulp.dest('CSS')) //コンパイルされたファイルをcssフォルダに格納
);
});
});
監視対象を拡張子で指定する方法
watchメソッドの第一引数にSassの拡張子を渡すことで該当するファイルを監視することができます。
//全てのscssファイルを監視
*.scss
私の場合は、複数のフォルダにSassファイルが含まれているため、以下のようにすることで全てのSassファイルを監視対象とすることができました。
gulp.js
const gulp = require('gulp'); //gulpモジュールをインポート
const sass = require('gulp-sass')(require('sass')); //gulp-sass、sassモジュールをインポート
//Sassをコンパイルするタスクを定義
gulp.task('sass', () => { //sassというタスクを定義
- return gulp.watch('./CSS/style.scss', () => { // style.scssを監視
+ return gulp.watch('./CSS/**/*.scss', () => { // style.scssを監視
return (
gulp
.src('CSS/style.scss') //style.scssを取得
.pipe( //取得したstyle.scssをsass()メソッドに渡す
sass({ //CSSファイルにコンパイル
outputStyle: 'expanded', //CSSがインデントされた形式で出力
})
// コンパイルエラーをログに表示
// ※エラーが発生してもタスクが停止しないようにしている
.on('error', sass.logError)
)
.pipe(gulp.dest('CSS')) //コンパイルされたファイルをcssフォルダに格納
);
});
});
まとめ
今回、全てのSassファイルを監視対象としたことで、どのファイルを変更しても自動コンパイルされるようになり、快適にコーディングできるようになりました。
参考にさせていただいたサイトのリンクを下記に貼っておきます。
皆さんも参考にしてみてください。
長々とありがとうございました。