2020年版：Gulp4でSassとPugをビルドしてBrowserSyncでライブプレビューする

以前書いた「GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする」のGulp4対応版です。

Gulp3から4にうっかりアップデートしたら従来の記述ではエラーを吐くようになったので、これを機にGulp4に対応しました。

サクッとSassを使い始めたい人はコピペしてください。

前提

以下はすでに扱えるものとし、説明を省きます。

• Node.js
• npm

ディレクトリ構成

dist/
 ├─css/
 └─js/
src/
 ├─js/
 ├─pug/
 └─scss/
gulpfile.js
package.json

distに生成物、srcに編集用ファイルの構成。

Gulpを初めて使うなら

npm i -g gulp

Gulpのグローバルインストールが必要です。
Gulpをすでに使っているなら飛ばしてください。

nodeモジュールのインストール

npm i -D gulp
npm i -D gulp-notify
npm i -D gulp-plumber
npm i -D gulp-pug 
npm i -D gulp-sass
npm i -D gulp-autoprefixer
npm i -D gulp-uglify
npm i -D browser-sync

冒頭にも挙げた以前の記事ではPugも入れていますが、最近は使わなくなったので外しています。

最近またPug使うようになったので加えました。

gulpfile

gulpfile.js

const gulp    = require('gulp');
const notify  = require("gulp-notify");
const plumber = require("gulp-plumber");
const sass    = require('gulp-sass');
const pug     = require('gulp-pug');
const autoprefixer = require('gulp-autoprefixer');
const uglify  = require('gulp-uglify');
const browserSync = require('browser-sync');

//setting : paths
const paths = {
  'root'    : './dist/',
  'pug'     : './src/pug/**/*.pug',
  'html'    : './dist/**/*.html',
  'cssSrc'  : './src/scss/**/*.scss',
  'cssDist'   : './dist/css/',
  'jsSrc' : './src/js/**/*.js',
  'jsDist': './dist/js/'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

//Sass
task('sass', function () {
  return (
    src(paths.cssSrc)
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(sass({
        outputStyle: 'expanded'// Minifyするなら'compressed'
      }))
      .pipe(autoprefixer({
        browsers: ['ie >= 11'],
        cascade: false,
        grid: true
        }))
      .pipe(dest(paths.cssDist))
  );
});

//Pug
task('pug', function () {
  return (
    src([paths.pug, '!./src/pug/**/_*.pug'])
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(pug({
        pretty: true,
        basedir: "./src/pug"
      }))
      .pipe(dest(paths.html))
  );
});

//JS Compress
task('js', function () {
  return (
    src(paths.jsSrc)
      .pipe(plumber())
      .pipe(uglify())
      .pipe(dest(paths.jsDist))
  );
});

// browser-sync
task('browser-sync', () => {
  return browserSync.init({
      server: {
          baseDir: paths.root
      },
      port: 8080,
      reloadOnRestart: true
  });
});

// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});

//watch
task('watch', (done) => {
  watch([paths.cssSrc], series('sass', 'reload'));
  watch([paths.jsSrc], series('js', 'reload'));
  watch([paths.pug], series('pug', 'reload'));
  done();
});
task('default', parallel('watch', 'browser-sync'));

あとはコンソールで npx gulp で実行。

主な変更点

gulp.task()の中でちゃんとreturn()で返してやらないとダメになったようです。実はそこ以外はあまり変わってません。

Gulp4になってから実行コマンドに npx が必要になったのが微妙にダルいです。