gulpでHTMLをminifyしてみる

2016/04/26

前回はgulpのインストール止まりだったので、今回は実際に動かすところを。 gulp-htmlminを使ってHTMLのminifyをしてみます。

まずはローカルインストール。

F:\backport>npm install gulp-htmlmin --save-dev

save-devオプションをつけてあるのでpackage.jsonにgulp-htmlminが追加されます。

...
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlmin": "^1.3.0"
  }
...

gulpではgulpfile.jsというJavaScriptファイルに処理(task)を書いていきます。

gulp-htmlminのUsageを参考にgulpfile.jsを作成しましょう。gulp.srcとgulp.destの引数は環境に合わせて書き換えてください。

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');

gulp.task('minify', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dist'))
});

実行時にはtask名を指定します。ここではminifyという名前をつけているのでtask名にはminifyを指定。

F:\backport>gulp minify
[15:04:25] Using gulpfile F:\backport\gulpfile.js
[15:04:25] Starting 'minify'...
[15:04:26] Finished 'minify' after 751 ms

F:\backport>

あっという間にminifyされたHTMLがdistディレクトリに格納されました。

gulpにはたくさんのプラグインが用意されているので、それらを組み合わせてtaskを作っていく、というのがgulpの基本的な流れになります。

コメント欄を表示する