ドットファイル(Dotfiles)的なノリで、gulp.js のタスクファイルをGitHubに置いときたいな...と思い立ち、cognitom/gulpfilesを作りました。再利用性のありそうなものだけ選んでたら、まだしょぼいのしかありませんが、今後鍛えて行く予定です。(ほんとかな)
このファイルをいちいちコピーして、依存モジュールをインストールしてとかめんどくさすぎるので、gulp-strawというコマンドを合わせて作りましたので合わせてどうぞ。
※このドキュメントは、基本的にはREADME.mdの日本語訳という位置づけです。
| タスクファイル | 定義されたタスク |
|---|---|
| gulpfile |
default clean watch
|
| task/bower |
bower bower-install bower-update bower-copy
|
| task/coffee | coffee |
| task/css |
css css-lint
|
| task/icon | icon |
| task/parse | parse |
使ってみる
もちろん、gulp.jsが必要です。gulp-strawがあると運用が幸せになります。とりあえずインストール。
$ npm install -g gulp
$ npm install -g gulp-straw
gulp-straw を最初に使うときには、setupする必要があります。詳しくは、gulp-straw のインストールの節を参照。
$ straw setup
準備できたら、gulpfileを落としてきます。こんな感じ↓
$ straw install gulpfile
$ straw install task/css
ちなみに、他の人の作ったgulpfileを落としてくるときは、こんな感じ。こちらの使い方であれば、setupしてなくても、落とせます。
$ straw install cognitom:gulpfile
$ straw install cognitom:task/css
詳しくはgulp-strawの"Getting Started"節を参照
タスクの書き方
基本的には好きに書けばいいのですが、再利用性を高めるため、スタイルガイドに従っています。基本方針としては、次のようなものです。細かい話は、スタイルガイドを参照。
- タスクのカテゴリーごとに、ファイルを分ける
- 分けたファイルは、taskディレクトリに入れる
- プロジェクトごとに変えたい部分(出力パスとか)は変数に
- 変数はpackage.jsonに書く
タスクごとの解説
gulpfile
ここにはプロジェクトを横断的に実行するタスクだけ書きます。私は、習慣的にdefaultタスクにビルドタスクを設定することが多いです。watch設定をする場合も、タスク横断的になりがちなので、gulpfileに書きます。自動生成するファイルが増えるとcleanタスクも必要になるかも。
逆に、少しでも再利用性がありそうだったり、モジュール化できそうなタスクは、gulpfileには書きません。別ファイルに追い出すようにしています。
var gulp = require('gulp');
var del = require('del');
var runSequence = require('run-sequence');
var requireDir = require('require-dir');
var dir = requireDir('./task');
gulp.task('default', function (cb){
runSequence('clean', 'icon', 'build', cb); // gulp.js 3.xでの書き方
});
gulp.task('clean', function(cb){
del(['./dist'], cb);
});
gulp.task('watch', function(){
gulp.watch(['src/icon/*.svg'], { debounceDelay: 1000 }, ['icon']);
});
default
- パブリッシュ系以外のタスクをまとめて実行
- Gitからクローンしたユーザが、
npm installに続けて実行するべきタスク
clean
- 自動生成されたファイル/ディレクトリを削除するタスク
- 削除にはdelを使う
watch
- ファイル監視タスク
- ライブリロードには、BrowserSyncを使う
(以下、執筆中)