Gulpで複数ディレクトリのSCSSを自動コンパイルする方法！

Gulpは様々なタスクを実行するためのNode.jsで開発されているアプリケーションです。今回はGulpを利用して、SCSSを自動コンパイルする方法をご紹介したいと思います。

準備

プロジェクトのルートディレクトリで以下のコマンドを打ちます。

npm init -y

1	npm init -y

次のコマンドを順番に実行してください。

npm install gulp

1	npm install gulp

npm install gulp-sass

1	npm install gulp-sass

npm install gulp-autoprefixer

1	npm install gulp-autoprefixer

npm install merge-stream

1	npm install merge-stream

ちなみにパーミッション関連のエラーが発生する場合は、sudoを利用するか、ディレクトリの権限を設定する事で解決されるはずです。

gulpfile.jsを作成する

プロジェクトのルートディレクトリにgulpfile.jsを作成してください。ディレクトリパス等は各々の環境に合わせて、変更をしてください。ちなみにアスタリスク(*)はワイルドカードとなっており、どのファイル名にも当てはまるという意味になります。まずは1つのディレクトリを監視する方法ですが、以下のようになります。

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'));

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つをつけて指定します。逆にアスタリスクを文字列に置き換えれば、そのファイルだけが監視されるという設定にも出来ます。実際には、以下のような記述となります。

ディレクトリ名/**/*.scss

1	ディレクトリ名/*/.scss

npm run gulpを実行してみよう

以下のコマンドをプロジェクトのルートディレクトリで実行すると、scssファイルの監視が始まります。変更があれば、自動的にcssファイルを生成してくれるため、scssの編集中は実行しておくとリアルタイムで変更を確認する事が可能です。

npm run gulp

1	npm run gulp

複数のディレクトリを監視する方法

やり方はシンプルです。例えば、PC専用のディレクトリとスマホ専用のディレクトリをそれぞれ監視したい場合、以下のように書き換えてみましょう。

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'));

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'));

このようにコードを追加する事で新たに監視する範囲を広げる事が可能です。