Gulp4のシンプルセッティング

node.js
gulp
javascript

こんばんは、Shumpei(@seventhseven)です。今回は、フロントエンド定番のビルドヘルパーGulpについてのお話です。

ビルドヘルパー（ビルドシステム）とは、コンパイルやファイルの更新などを感知して、ブラウザのリロードを自動でしてくれたりなど、面倒なタスクを任せられるシステムです。

node.jsで動くので、バックエンド用に新たにサーバを立てる必要もありません。

圧縮して、結合したり、ソースマップ作ったり、ブラウザの更新をしたり… そんな作業をgulpにやってもらいます。

npmでインストール

鹿野壮さんの最新ビルドシステムGulp 4入門〜環境構築からタスク作成まで〜を参考に、コマンドでちゃちゃっとインストールしちゃいましょう。


$ cd /Users/myproject

$ npm init -y
# -yはインストールの際の質問に、入力しなくてもすべてyesと答えるオプション

$ npm install gulp -D
# -Dは--save-devの略。ローカルにインストールしてこのプロジェクトのみ使用します。

$ npx gulp -v
# バージョンの確認
#
# グローバルにインストールしなかった場合、
# 通常はpackage.jsonにnpm scriptとして
# gulpコマンドの使用を書かなくてはいけないのですが、
# npm5.2.0から「npx」コマンドを使うことで、グローバルと同じふるまいをしてくれます。

gulpfile.js

さて、下記に紹介するのは自分が使ったgulpの設定です。

pug + sass + javascript

の更新をwatchで監視しながら、ブラウザシンクで自動でブラウザをリロードするようにしています。

※requireで書かれた部分はgulpのプラグインになりますので、別途インストールが必要です。


// gulpプラグインの読み込み
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

// sass系
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var progeny = require('gulp-progeny');

// js系
var concat = require('gulp-concat'); // ファイル結合
var jshint = require('gulp-jshint'); // 構文チェック ※別途gulp-jshintとjshintをインストールする必要がある
var rename = require('gulp-rename'); // ファイル名変更
var uglify = require('gulp-uglify'); // ファイル圧縮

// sass
gulp.task('sass', function () {
  return gulp
    .src('src/scss/style.scss')
    .pipe(plumber())
    .pipe(progeny())
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: 'expanded',
      }),
    )
    .pipe(
      autoprefixer({
        browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
        cascade: false,
      }),
    )
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/css'));
});

// JS - concat js files
gulp.task('js.concat', function () {
  return gulp
    .src(['src/js/*.js'])
    .pipe(plumber())
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('bundle.js'));
});

// JS - compress js files
gulp.task('js.compress', function () {
  return gulp
    .src('dist/js/bundle.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(rename('bundle.min.js'))
    .pipe(gulp.dest('dist/js'));
});

// Browser Sync
gulp.task('server', function (done) {
  browserSync.init({
    port: 8000,
    server: {
      baseDir: './dist/',
      index: './html/index.html',
    },
  });
  done();
});

// watch
gulp.task('watch', function (done) {
  gulp.watch('src/scss/style.scss', gulp.task('sass'));
  gulp.watch('src/js/*.js', gulp.task('js.concat'));
  gulp.watch('dist/js/*.js', gulp.task('js.compress'));
  gulp
    .watch(['dist/html/*', 'dist/css/*', 'dist/js/*'])
    .on('change', function () {
      browserSync.reload();
    });
  done();
});

gulp.task('default', gulp.parallel('server', 'watch'));

gulpfile.jsはこんな感じです。

HTMLのテンプレートエンジンであるpugで書いたファイル
CSSプリプロセッサ（CSSメタ言語）のsassで書いたファイル
細かく分かれたJavaScriptのファイル

これらのファイルをwatchタスクで監視し、監視下に置かれたファイルが更新されたら、それぞれpipeで書かれたタスクで処理が走ります。

あとはコマンドでnpx gulpと叩けばnodeサーバが起動し、 Chromeが自動で開いてlocalhostの8000ポートでアクセスした結果が表示されます。

様々なタスクがありますが、gulpと叩くとdefaultに書いたタスクが走ります。 defaultは最終行にあるタスクで、serverやwatchを登録したので、ざっくり全体をラップした形で管理しています。

おわりに

gulpを設定するのは大変ですが一回作ってしまえば楽なので、この設定をだいたい使いまわしています。

npm installをすると毎回node_modulesが出来上がってしまう問題があるので、シンボリックリンクで解決されているエンジニアの方もいらっしゃるようです。

node.jsのいい練習にもなるかと思いますので、挑戦してみてはいかがでしょうか。

子持ちエンジニアの方に質問！勉強時間はいつ？

【Git】Git Feature Flow（的なもの）でシンプル運用する