Gulp + SASS + assemble を動かすためのgulpfile.jsの設定

Gulpsを使ってassembleから自動的にHTMLやCSSを書き出すためのgulpfile.jsのソースをメモしておきます。

そもそもGulpやSASS、assembleとは何か

Gulpjs

Gulpjsとはnode.jsを使ったビルドシステムです。HTMLやCSSを書き換えるたびにブラウザ上で自動的にリロードをかけたりできます。

SASS

SASSはスタイルシート(CSS)記述用言語で、CSSよりも簡略化して記述効率を高めたものです。

body
  color: #000

{}を使わずに書き、上記のような感じになります。

assemble

assembleは、node.jsで動くHTMLテンプレートシステムです。HTMLをパーツに分けてインクルードしたりループを作ったりできます。

gulpfile.jsの内容

browser-syncというモジュールを使ってHTMLとCSSの書き出しと同時にブラウザをリロードします。

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var sass        = require('gulp-sass');
var browserSync = require('browser-sync').create();
var watch       = require('gulp-watch');
var assemble = require('assemble');
var app = assemble();

//書き出されたHTMLなどを収める公開ディレクトリ
const root_dir    = './public_html/';

gulp.task('default', function(){

  //browserSyncを起動する
  browserSync.init({
    server: {
      baseDir: root_dir
    }
  });

  //sassを監視
  watch(['sass/**/*.{scss,sass}'],function(){
    gulp.start(['sass'])
  });

  //テンプレートを監視
  watch(['templates/**/*.{hbs,md}'],function(){
    gulp.start(['assemble']);
  });

  //ソースファイルが変更されたらリロードする
  gulp.watch([root_dir + '**/*.*']).on('change', browserSync.reload);

});

//hbsファイルをロードする
gulp.task('load', function(cb){
  app.partials('templates/partials/*.hbs');
  app.layouts('templates/layouts/*.hbs');
  app.pages('templates/pages/*.hbs');
  cb();
});

//hbsからHTMLのコンパイル
gulp.task('assemble',['load'], function(){
   return app.toStream('pages')
    .pipe(app.renderFile())
    .pipe(htmlmin())
    .pipe(extname())
    .pipe(app.dest(root_dir));
});

//sassからCSSのコンパイル
gulp.task('sass', function(){
  return gulp.src(['./sass/**/*.{scss,sass}'])
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(gulp.dest(root_dir + 'css/'));
});

以前は、gulp-assembleと言うモジュールが提供されていましたが、現在は非推奨となっています。