gulpfileをCoffeeScript等で書く方法
Task Runnerツールのgulpで、
タスクの設定は gulpfile.js という設定スクリプトを作って書くことになっています。
(任意のファイルを指定する場合は、コマンドライン引数の --gulpfile オプションで指定します)
Task Runnerツールとして有名なGruntでは、設定ファイルをjs以外にCoffeeScriptをデフォルトでサポートしているため、
オブジェクトの入れ子がたくさんできる gruntfile をCoffeeScriptで書くという人も多いと思います。
gulpでは、デフォルトでは js ですが、 --require オプションを使うことで任意のaltJSを使って、
gulpfile を書くことが出来るようになっています。
(この場合のデフォルトとは、gulp側に自動的にcoffeeという拡張子をみて何かする処理がないということ)
CoffeeScriptでgulpfileを書く
サンプルは以下に置いてあります。
まずは、必要なnodeモジュールをインストールします(上記のプロジェクトなら既に定義してあるので npm install するだけ)
npm install --save-dev gulp gulp-coffee coffee-script
次に、設定ファイルをCoffeeScriptで書きます。
gulp = require('gulp')
coffee = require('gulp-coffee')
gulp.task 'coffee', ->
gulp.src('src/**/*.coffee')
.pipe(coffee({bare:true}))
.pipe gulp.dest('app')
gulp.task 'default', ->
gulp.run 'coffee'
この設定ファイルをgulpの設定ファイルと認識させて、defaultタスクを実行したいと思います。
gulpfile.js の場合は $ gulp とするだけで実行出来ますが、
gulpfile.coffee をCoffeeScriptでコンパイルしてから実行させる必要があります。
それを簡単に行うのが、 --require オプションで、コンパイラとなるNodeのモジュール名をしてします。(coffeescriptの場合は coffee-script がモジュール名です)
なので、以下のように実行すれば gulpfile.coffee を設定して読み込んでタスクを実行出来ます。
$ gulp --require coffee-script
毎回指定するのが面倒な場合は alias gulp=gulp --require coffee-script とか。
これで、coffeescriptで書いた設定ファイルを利用できるようになりますが、
他の手法についてはドキュメントにも書いてあるのでそちらも参照するといいです。
こういうTips的な使い方はrecipesにまとめていってるようなのでそちらも参照するといいです。
仕組み
最初に js という拡張子についてしか、 gulp側には定義されてないと言いましたが、
gulpfile.coffee の coffee という拡張子はどうやって認識してるのでしょうか?
gulp 3.4 では gilefile + 拡張子のリスト にマッチするものを設定ファイルとして認識するようになってます。
function getGulpFile() {
var extensions;
if (require.extensions) {
extensions = Object.keys(require.extensions).join(',');
} else {
extensions = ['.js'];
}
var gulpFile = findup('gulpfile{'+extensions+'}', {cwd: cwd, nocase: true});
return gulpFile;
}
この拡張子のリストは require.extensions という配列から来てることがわかります。
この require.extensions はnodeにあるグローバルオブジェクト的なもので、ここに .coffee の文字列が存在すると、
gulpfile.coffee というファイル名が設定ファイルとして検出出来るようになってます。
.coffee というのはどこからきてるのかというと、coffee-scriptのnodeモジュール側で定義されています。
何か微妙な感じがしますがそういう仕組みのようです。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。