ドットファイル(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を使う

(以下、執筆中)

task/bower

`bower`

`bower-install`

`bower-update`

`bower-copy`

task/icon

`icon`

task/coffee

task/css