gulp-header の使い方 - JavaScript ファイルに banner をくっ付ける方法

phi phi on gulp

オレの Advent Calendar 2015 - Adventar の 2 日目です.

First

JavaScript のライブラリを作る際, ファイルの先頭に
banner を付けるってのがお決まりだったりしますよね.

grunt-contrib-uglify では, 引数に banner を渡せばくっつけてくれたんですが, grunt-uglify にはそのような機能がありません.

そこで今回は, gulp-header というプラグインを使って banner をくっ付ける方法を紹介します.

About gulp-header

gulp-header とは, 渡されたファイルの先頭に テキストをくっつけてくれるシンプルな gulp プラグインです. 渡した変数を展開してくれる便利な機能もあります.

https://www.npmjs.com/package/gulp-header

Usage

1. Install

まず, gulpgulp-header をインストールします.

npm install --save-dev gulp  
npm install --save-dev gulp-header  

2. Setup

自前か, npm init とかで適当に package.json を作って下さい.

そして対象となるファイルを作ります. 今回は a.js としています.

src/a.js

var a = function() {  
  console.log('a');
};

3. Setup gulpfile.js

gulp-header を使った例です.

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

var pkg = require('./package.json');  
var banner = [  
  "/* ",
  " * <%= pkg.name %> <%= pkg.version %>",
  " * <%= pkg.description %>",
  " * <%= pkg.license %> Licensed",
  " * ",
  " * Copyright (C) 2015 <%= pkg.author %>, <%= pkg.homepage %>",
  " */",
  "",
].join('\n');

gulp.task('default', ['build']);

gulp.task('build', function() {  
  gulp.src('src/*.js')
    .pipe(header(banner, {
      pkg: pkg,
    }))
    .pipe(gulp.dest('./dist'))
    ;
});

gulp-header には, 第一引数にテキスト, 第二引数に展開用のオプションを渡せます.

今回は package.json から値を取ってきてオプションに渡すことで package.json の内容と banner の内容が連動するようにしています.

4. Run

あとは実行するだけです.

gulp  

dist/a.js が出力されます.

中身はこんな感じになります.

/* 
 * gulp-test 1.0.0
 * gulp test
 * MIT Licensed
 * 
 * Copyright (C) 2015 phi, http://phiary.me
 */

var a = function() {  
  console.log('a');
};

ちゃんと package.json の内容が反映されていますね♪

Demo

github 上で今回のデモを公開してます.
良かったら clone して遊んでみてください.

https://github.com/phi-jp/gulp-test/tree/feature/header

Last

久々の gulp エントリーでした.

grunt すげーとか言ってた時代もありましたが, 最近はもう作ってるライブラリは全て gulp 使うようになっちゃってます.

きっと来年の今頃は hogehoge すげーとか言ってるんだろうなぁ...

Reference