Gulpsを使ってassembleから自動的にHTMLやCSSを書き出すためのgulpfile.jsのソースをメモしておきます。
Gulpjsとはnode.jsを使ったビルドシステムです。HTMLやCSSを書き換えるたびにブラウザ上で自動的にリロードをかけたりできます。
SASSはスタイルシート(CSS)記述用言語で、CSSよりも簡略化して記述効率を高めたものです。
body color: #000
{}を使わずに書き、上記のような感じになります。
assembleは、node.jsで動くHTMLテンプレートシステムです。HTMLをパーツに分けてインクルードしたりループを作ったりできます。
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と言うモジュールが提供されていましたが、現在は非推奨となっています。
コメントを残す