gulp-drinkbar を公開しました

投稿日:2016年07月20日
カテゴリ: JavaScript , プログラミング


フミリアです。

Webのフロントエンド開発に、JavaScriptフレームワークやツールキットを使うことが多くなってきました。

JavaScriptの新しい言語仕様であるECMAScript 2015(以下、ES2015)が普及してきたのですが、Webブラウザは対応しておらず、ES2015から旧来のES5の形式に変換(トランスパイル)するという加工過程が必要です。

さらにnode+npmエコシステムによるJavaScriptプログラムのモジュール化が浸透したこともあいまって、もはやHTML内での<script>タグでのスクリプトファイル指定だけでは管理しきれなくなってきました。

最近のJavaScript事情

ES2015からES5への変換、そしてCommonJS形式(require()でnpmパッケージの読み込み)からWebブラウザで実行できる形式(名前あるの?)への変換を行うため、BrowserifyやWebpack、RollupというJavaScript変換ツールが出てきました。また、SassやStylusなどのAltCSSからCSSファイルを生成したり、ブラウザのオートリロードを行うことなどを、タスクという形で定義し、コマンドラインから自由に起動できるGulpやGruntといったタスクランナーもよく使われています。最近は、package.jsonにシェルスクリプトを記述し、npmのみでタスクを表現する原点回帰な人たちもあらわれてきました。

Gulpタスクをシンプルに記述したい

さて、私もGulpはよく使います。GulpはJavaScriptでコンフィグやタスクを記述できるため書きやすいのですが、いかんせん記述が細かすぎて、複雑なタスクを定義すると、「Gulpタスクをデバッグするために時間を費やす」といったことがいやおうに起こります。Ansibleもプログラミングしている感じで、だんだん気軽に使えなくなってしまいました。

Laravel Elixir

PHPフレームワークの雄、Laravel 5には、人それぞれにさまざまなツールを使いapp.cssとapp.jsを生成するため、Laravel ElixirというGulpをラップしたとても便利なツールが提供されています。

Laravel Elixirは使用するツールごとにメソッドが用意され、とてもわかりやすい記述をすることができます。「defaultタスクでapp.cssとapp.jsを生成する」という目的に特化した結果、むちゃむちゃシンプルに書けるようになりました。こりゃすごい。Laravel使ってなくても使えるツール、そう思っていました。

私も好んでLaravel Elixirを使っていたのですが、だんだんと次の点が気になってきました。

  • 複数の.cssや.jsファイルを生成させたいときに、自分でGulpタスクを定義できない。正確にはgulp.task()で定義できるが、Elixirの恩恵が受けられない。
  • 使用するツールごとにGulpタスクが暗黙で定義されるため、複数の.jsを生成するためにbrowserifyを2回呼ぶことができない。

gulp-drinkbar

Laravel Elixirのよいところを踏襲し、gulp−drinkbar を作りました。gulpfile.jsを書きやすくするという点は同じで、Gulpタスクをシンプルに記述できることを目指しました。こんな風に書けます。

var drinkbar = require('gulp-drinkbar')

drinkbar
    .task('scripts:app')
    .browserify({
        inputs: [
            'resources/assets/js/app.js',
        ],
        config: {
        },
        output: 'public/assets/app.js',
        cleans: [
        ],
    })
    .watch('resources/assets/js/**/*.js')

drinkbar
    .task('scripts', ['scripts:app'])
    .define()

drinkbar
    .task('default', ['scripts'])
    .define()
    .on('after', function () {
        drinkbar.notify('Build finished.')
    })

default, scripts, scripts:app の3つのGulpタスクを定義しています。

gulpでビルドするとsourcemapも生成します。gulp --production でビルドすればminiyもします。 ビルド後にOSの通知メッセージも出します。 自動的にwatchタスクも生成し、gulp watchコマンドが使えます。

ね、簡単でしょう?

主要なツールは定義済みのレシピ関数を呼ぶだけ。この例なら.browserify({})の部分です。渡すパラメーターの書き方もほぼ一緒。.configにはツールごとに用意されているオプションを渡せます。.clean(s)は中間ファイルの削除に使えます。

使えるレシピはこれだけ!

  • HTML変換: pug(jade)
  • CSS変換: stylus, sass, less
  • JS変換: babel, coffeescript, typescript, riot
  • JSON変換: json5, cson, yaml
  • 連結: styles, scripts
  • パッキング: browserify, webpack, rollup (全てデフォルトでES2015がビルドできる設定済み)
  • その他: copy, clean, browsersync

もはやgulpオブジェクトを使う必要すらありません!!

究極に簡単になったGulpタスク定義を、是非試してみてください。

詳しくは gulp−drinkbar のドキュメントを見てください。サンプルは gulp-drinkbar-examples からどうぞ。

Let's npm install gulp-drinkbar !!!


投稿日:2016年07月20日
カテゴリ: JavaScript , プログラミング