Gulpは様々なタスクを実行するためのNode.jsで開発されているアプリケーションです。今回はGulpを利用して、SCSSを自動コンパイルする方法をご紹介したいと思います。
準備
プロジェクトのルートディレクトリで以下のコマンドを打ちます。
1 |
npm init -y |
次のコマンドを順番に実行してください。
1 |
npm install gulp |
1 |
npm install gulp-sass |
1 |
npm install gulp-autoprefixer |
1 |
npm install merge-stream |
ちなみにパーミッション関連のエラーが発生する場合は、sudoを利用するか、ディレクトリの権限を設定する事で解決されるはずです。
gulpfile.jsを作成する
プロジェクトのルートディレクトリにgulpfile.jsを作成してください。ディレクトリパス等は各々の環境に合わせて、変更をしてください。ちなみにアスタリスク(*)はワイルドカードとなっており、どのファイル名にも当てはまるという意味になります。まずは1つのディレクトリを監視する方法ですが、以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); // SCSSのファイル名とCSSの出力先を指定 gulp.task('sass:compile', () => { return gulp.src('./src/pc/assets/scss/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(autoprefixer()) .pipe(gulp.dest('./src/pc/assets/css')); }); // 自動監視のタスクを作成 gulp.task('sass:watch', () => { gulp.watch('./src/pc/assets/scss/*.scss', gulp.task('sass:compile')); }); // "npm run gulp" コマンドでsass:watchが実行されるように指定 gulp.task('default', gulp.task('sass:watch')); |
ちなみに特定のディレクトリ直下にある全てのファイルとディレクトリを扱いたい場合は、アスタリスク2つとスラッシュ、その後ろにアスタリスク1つをつけて指定します。逆にアスタリスクを文字列に置き換えれば、そのファイルだけが監視されるという設定にも出来ます。実際には、以下のような記述となります。
1 |
ディレクトリ名/**/*.scss |
npm run gulpを実行してみよう
以下のコマンドをプロジェクトのルートディレクトリで実行すると、scssファイルの監視が始まります。変更があれば、自動的にcssファイルを生成してくれるため、scssの編集中は実行しておくとリアルタイムで変更を確認する事が可能です。
1 |
npm run gulp |
複数のディレクトリを監視する方法
やり方はシンプルです。例えば、PC専用のディレクトリとスマホ専用のディレクトリをそれぞれ監視したい場合、以下のように書き換えてみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var merge = require('merge-stream'); // SCSSのファイル名とCSSの出力先を指定 gulp.task('sass:compile', () => { var pc = gulp.src('./src/pc/assets/scss/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(autoprefixer()) .pipe(gulp.dest('./src/pc/assets/css')); var mobile = gulp.src('./src/sp/assets/scss/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(autoprefixer()) .pipe(gulp.dest('./src/sp/assets/css')); return merge(pc, mobile); }); // 自動監視のタスクを作成 gulp.task('sass:watch', () => { gulp.watch('./src/pc/assets/scss/*.scss', gulp.task('sass:compile')); gulp.watch('./src/sp/assets/scss/*.scss', gulp.task('sass:compile')); }); // "npm run gulp" コマンドでsass:watchが実行されるように指定 gulp.task('default', gulp.task('sass:watch')); |
このようにコードを追加する事で新たに監視する範囲を広げる事が可能です。