Gulp4の導入からSCSSファイルをLiveReloadするまで

概要

Gulp.jsとは

Gulp.jsは、開発作業を自動化する「タスクランナー」というツールの1つです。
具体的には、以下のようなことが設定可能です。
・SASSやLESSのコンパイル
・jsやcssのminify
・キャッシュファイルの削除
・画像の圧縮
・ファイルの監視
など

（公式サイトは、こちら）

今回やりたいこと

今回は、Gulp.jsを使用して、自動で以下のことを行うように設定します。

• SCSSに変更があったら、CSSにコンパイル＆minifyを行う
• ブラウザをリロードしスタイルを自動反映をする

環境

• npm 9.6.7
• gulp 4.0.2

gulp設定

1.Hello Worldする

gulpのタスクを使って「Hello World!」を出力できるようにします。
まずは、gulpをinstallします。

$ npm install gulp

gulpfile.jsを用意し以下の記述を行います。
defaultのタスクにHello World!を出力するように設定しています。

gulpfile.js

'use strict';

const gulp = require('gulp');

gulp.task('default', (done) => {
  console.log('Hello World!');
  done();
});

defaultのタスクを実行するには、gulpのコマンドだけで実行できます。
これで、Hello World!が出力されました。

$ gulp

Hello World!

2. SCSSファイルをCSSにコンパイルする

gulp-sassを追加でインストールします。
gulp-sassを使用して、SCSSファイルをCSSにコンパイルします。

$ npm install gulp sass gulp-sass

gulpfile.jsは、以下の記述になります。

gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));//追加

gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss") //SCSSファイルを指定
        .pipe(sass()) //CSSにコンパイル
        .pipe(gulp.dest("./css"));//CSSフォルダに出力
});

gulp.task('default', gulp.task('sass'));//defaultタスクにsassを実行するよう指定

gulpまたはgulp sassの実行することで、
SCSSファイルをコンパイルし、CSSを出力することができます。

$ gulp
#または
$ gulp sass

3. CSSのminifyする

gulp-clean-cssとgulp-renameを追加でインストールします。
gulp-clean-cssを使用し、cssファイルminifyを行い
gulp-renameを使用し、*.min.cssというファイル名に変更して出力します。

$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename

gulpfile.jsは、以下の記述になります。

gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');//追加
const rename = require('gulp-rename');//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))//ファイル名の変更
        .pipe(cleanCss())//minifyの実施
        .pipe(gulp.dest("./css"));//minifyファイルの出力
});

gulp.task('default', gulp.task('sass'));

gulpまたはgulp sassの実行することで、
*.cssと*.min.cssファイルを出力することができます。

$ gulp
#または
$ gulp sass

4. SourceMapを作成する

gulp-sourcemapsを追加でインストールします。
gulp-sourcemapsを使用することで、SourceMapを作成することができます。

SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイルです。
ブラウザ上でデバッグする際に、楽になります。

$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps

gulpfile.jsは、以下の記述になります。

gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(sourcemaps.init())//初期化
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))//出力
        .pipe(gulp.dest("./css"));
});

gulp.task('default', gulp.task('sass'));

gulpまたはgulp sassの実行することで、
*.cssと*.min.cssファイルに加え
*.min.css.mapも出力されます。

$ gulp
#または
$ gulp sass

5. ファイルの更新を監視する

gulp-watchとgulp-plumberを追加でインストールします。

gulp-watchを使用し、ファイル更新の監視とgulp-plumberを使用し、エラーになったときにwatchのタスクがエラーで停止にないように抑止します。

$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps gulp-watch gulp-plumber

gulpfile.jsは、以下の記述になります。

gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");
const watch = require('gulp-watch');//追加
const plumber = require('gulp-plumber');//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(plumber())//エラーの抑止
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("./css"));
});

//scssの監視＆変更があった場合にsassのタスク実行
gulp.task('watch', () => {
    gulp.watch('sass/**/*scss', gulp.task('sass'));
});


gulp.task('default', gulp.task('watch'));//デフォルトタスクにwatchを指定

gulpまたはgulp watchの実行することで、
SCSSファイルに変更があった場合にsassタスク実行されます。

$ gulp
#または
$ gulp watch

これで、スタイルシートがシンタックスエラーになっても止まりません。

6. LiveReloadを行う

browser-syncを追加でインストールします
browser-syncを使用しでファイルが更新したらブラウザ画面のリロードを行います

# browser-syncをインストール
$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps gulp-watch gulp-plumber browser-sync

gulpfile.jsは、以下の記述になります。

gulpfile.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");
const watch = require('gulp-watch');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create();//追加

gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());//LiveReloadの実施
});

gulp.task('watch', () => {
    gulp.watch('sass/**/*scss', gulp.task('sass'));
});

//browserSyncの初期化
gulp.task('liveReload', function() {
    browserSync.init({
        proxy: "http://localhost/gulp_test",
        port: 3000,
    });
});

gulp.task('default', gulp.parallel('liveReload','watch'));//liveReloadのタスクを最初に実行

gulpを実行すると、SCSSファイルを変更しただけで自動でブラウザがリロードされるようになります。

$ gulp

まとめ

Gulp4を使用したLiveReloadをできるようになるまで、段階を追って説明しました。
使用するプラグインが多かったりしますが、一度設定してしまえば色んなプロジェクトに使い回せるのでとても便利です。

参考になりましたら幸いです。
自動化ライフをエンジョイしてください！！

ここまで読んでいただきありがとうございました。