gulpfiles



ドットファイル(Dotfiles)的なノリで、gulp.js のタスクファイルをGitHubに置いときたいな...と思い立ち、[cognitom/gulpfiles](https://github.com/cognitom/gulpfiles)を作りました。再利用性のありそうなものだけ選んでたら、まだしょぼいのしかありませんが、今後鍛えて行く予定です。(ほんとかな)

このファイルをいちいちコピーして、依存モジュールをインストールしてとかめんどくさすぎるので、[gulp-straw](https://github.com/cognitom/gulp-straw)というコマンドを合わせて作りましたので合わせてどうぞ。

**※このドキュメントは、基本的には[README.md](https://github.com/cognitom/gulpfiles)の日本語訳という位置づけです。**

| タスクファイル | 定義されたタスク |
| :-- | :-- |
| [gulpfile](https://github.com/cognitom/gulpfiles/blob/master/gulpfile.coffee) | `default` `clean` `watch` |
| [task/bower](https://github.com/cognitom/gulpfiles/blob/master/task/bower.coffee) | `bower` `bower-install` `bower-update` `bower-copy` |
| [task/coffee](https://github.com/cognitom/gulpfiles/blob/master/task/coffee.coffee) | `coffee` |
| [task/css](https://github.com/cognitom/gulpfiles/blob/master/task/css.coffee) | `css` `css-lint` |
| [task/icon](https://github.com/cognitom/gulpfiles/blob/master/task/icon.coffee) | `icon` |
| [task/parse](https://github.com/cognitom/gulpfiles/blob/master/task/parse.coffee) | `parse` |

## 使ってみる

もちろん、[gulp.js](https://github.com/gulpjs/gulp)が必要です。[gulp-straw](https://github.com/cognitom/gulp-straw)があると運用が幸せになります。とりあえずインストール。

```bash
$ npm install -g gulp
$ npm install -g gulp-straw
```

`gulp-straw` を最初に使うときには、`setup`する必要があります。詳しくは、[gulp-straw のインストールの節](https://github.com/cognitom/gulp-straw#installation)を参照。

```bash
$ straw setup
```

準備できたら、gulpfileを落としてきます。こんな感じ↓

```bash
$ straw install gulpfile
$ straw install task/css
```

ちなみに、他の人の作ったgulpfileを落としてくるときは、こんな感じ。こちらの使い方であれば、setupしてなくても、落とせます。

```bash
$ straw install cognitom:gulpfile
$ straw install cognitom:task/css
```

詳しくは[gulp-strawの"Getting Started"節](https://github.com/cognitom/gulp-straw#getting-started)を参照


## タスクの書き方

基本的には好きに書けばいいのですが、再利用性を高めるため、[スタイルガイド](http://qiita.com/cognitom/items/045c8596a30aa5ab8a47)に従っています。基本方針としては、次のようなものです。細かい話は、スタイルガイドを参照。

- タスクのカテゴリーごとに、ファイルを分ける
- 分けたファイルは、[task](https://github.com/cognitom/gulpfiles/tree/master/task)ディレクトリに入れる
- プロジェクトごとに変えたい部分(出力パスとか)は変数に
- 変数は[package.json](https://github.com/cognitom/gulpfiles/blob/master/package.json)に書く



## タスクごとの解説

### gulpfile

ここにはプロジェクトを横断的に実行するタスクだけ書きます。私は、習慣的に`default`タスクにビルドタスクを設定することが多いです。`watch`設定をする場合も、タスク横断的になりがちなので、gulpfileに書きます。自動生成するファイルが増えると`clean`タスクも必要になるかも。

逆に、少しでも再利用性がありそうだったり、モジュール化できそうなタスクは、gulpfileには書きません。別ファイルに追い出すようにしています。

```javascript
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](https://www.npmjs.org/package/del)を使う

#### `watch`

- ファイル監視タスク
- ライブリロードには、[BrowserSync](http://www.browsersync.io/)を使う

(以下、執筆中)

### task/bower

#### `bower `

#### `bower-install`

#### `bower-update`

#### `bower-copy`

### task/icon

#### `icon`

### task/coffee

### task/css