WebDesign Dackel

gulpでJSファイルをminifyしてbannerを挿入する

gulpでJSファイルをminifyしてbannerを挿入する

Hatena0
Google+0
Pocket0
Feedly0

これまでタスクランナーはGruntを使っていたのですが、最近になってGulpを使い始めました。
他のブログなどで言われている通り、やっぱり設定ファイルが書きやすくていいですね!

ただ、GruntでJSをminifyしたあとファイルの上部にbannerを挿入する、みたいなのが分からなかったのでメモ。

やりたいこと

Gruntではgrunt-contrib-uglify自体にbannerオプションがついていましたがGulpには無い、ということで一瞬パニックでしたがgulp-headerというプラグインで簡単に出来るみたいです。
既にGulpを動かせる状態で、ディレクトリは以下の様になっているとします。

├── gulpfile.coffee
├── node_modules
│   ├── coffee-script
│   ├── gulp
│   ├── gulp-load-plugins
│   ├── gulp-plumber
│   └── gulp-uglify
├── package.json
└── src
    └── app.js

src/app.jsをminifyして、ファイルの上部にbannerを挿入したいと思います。
ファイルの中身はそれぞれこんな感じになっているとします。

src/app.js:

(function(){
  alert("Add header!!");
}());

package.json:

{
  "name": "add-header-test",
  "version": "1.0.0",
  "description": "説明を書いておきます",
  "author": "tsuyoshiwada",
  "license": "MIT",
  "devDependencies": {
    "coffee-script": "^1.9.0",
    "gulp": "^3.8.10",
    "gulp-load-plugins": "^0.8.0",
    "gulp-plumber": "^0.6.6",
    "gulp-uglify": "^1.1.0"
  }
}

プラグインのインストール

他のプラグインと同様に、作業ディレクトリでgulp-headerをインストールします。

npm install gulp-header --save-dev

タスクを書く

CoffeeScriptを使って書いています。生JSの場合は読み替えて下さい。

# require modules
gulp = require "gulp"
$ = do require "gulp-load-plugins"

# bannerの準備
# package.jsonを読み込んで、あとでbannerに挿入します
pkg = require "./package.json"
banner = [
  "/*!"
  " * <%= pkg.name %>"
  " * <%= pkg.description %>"
  " * @version <%= pkg.version %>"
  " * @author <%= pkg.author %>"
  " * @license <%= pkg.license %>"
  " */"
].join "\n"

# `compile`タスクを用意
# minifyとbannerの挿入を一気にやっちゃいます
gulp.task "compile", ->
  gulp.src "./src/app.js"
  .pipe $.uglify()
  .pipe $.header banner, {pkg: pkg}
  .pipe gulp.dest "./dist"

詳しい説明はしませんが、ざっくりというと

  1. $.uglify()./src/app.jsをminifyして
  2. $.header()で用意しておいたbannerを挿入
  3. あとは./distディレクトリにapp.jsを書き出し

という感じです。

タスクを実行

gulp compile

これでタスクが実行されました。ここまでやるとディレクトリは下記の様な感じになっています。

├── dist
│   └── app.js
├── gulpfile.coffee
├── node_modules
│   ├── coffee-script
│   ├── gulp
│   ├── gulp-header
│   ├── gulp-load-plugins
│   ├── gulp-plumber
│   └── gulp-uglify
├── package.json
└── src
    └── app.js

./dist/app.jsが追加されてますね!

中身を確認してみると無事minifyとbannerの挿入がされているかと思います。(サンプル程度では全然minifyされていないですね…)

/*!
 * add-header-test
 * 説明を書いておきます
 * @version 1.0.0
 * @author tsuyoshiwada
 * @license MIT
 */!function(){alert("Add header!!")}();

参考サイト

gulp-headerには他にオプションの指定方法があるので、使い方を確認するにはnpmのページを参照ください。

gulp-header

まとめ

Gulpはほんと使いやすくていい感じですね、Gruntと比較して学習コストも低いのですぐ使い始められました。
新規で環境を構築するなら、Gulpを使ったほうが良さそうですね!
まだあまり使い込めていないのですが、これから少しずつ慣れていこうかなと思います。