GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする

2017年夏季時点の自分用の定番としてメモ。

※以下はGulp3の内容です。Gulp4に対応した内容を新たに書きました。

前提

Nodeとnpmは扱えるものとします。

ディレクトリ構成

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

distに生成物、srcに編集用ファイルの構成。
pugビルド後のHTMLファイルはdist直下に作られる。

nodeモジュール

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

ビルドとライブプレビュー以外に、gulp-plumberとgulp-notifyでエラー時の通知もするように。

gulpfile

gulpfile.js

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

//setting : paths
var paths = {
  'scss': './src/sass/',
  'css': './dist/css/',
  'pug': './src/pug/',
  'html': './dist/',
  'js': './dist/js/'
}
//setting : Sass Options
var sassOptions = {
  outputStyle: 'compressed'
}
//setting : Pug Options
var pugOptions = {
  pretty: true
}

//Sass
gulp.task('scss', function () {
  gulp.src(paths.scss + '**/*.scss')
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
    .pipe(sass(sassOptions))
    .pipe(autoprefixer())
    .pipe(gulp.dest(paths.css))
});

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

//Browser Sync
gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: paths.html
    }
  });
  gulp.watch(paths.js + "**/*.js", ['reload']);
  gulp.watch(paths.html + "**/*.html", ['reload']);
  gulp.watch(paths.css + "**/*.css", ['reload']);
});
gulp.task('reload', () => {
  browserSync.reload();
});

//watch
gulp.task('watch', function () {
  gulp.watch(paths.scss + '**/*.scss', ['scss']);
  gulp.watch([paths.pug + '**/*.pug', '!' + paths.pug + '**/_*.pug'], ['pug']);
});

gulp.task('default', ['browser-sync', 'watch']);

あとは gulp で実行。

補足

Sassはファイル名が _ で始まるファイルはデフォでビルドされないがPugはビルドされてしまうので、Sass同様にファイル名が _ で始まる場合はビルドから除外しています。