LoginSignup
46

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-08-18

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-plumbergulp-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同様にファイル名が _ で始まる場合はビルドから除外しています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46