Gulp 導入にあたって

## 手順
- Node.js入れる
- npm init (package.json作成)
- npm install (packageインストール)
- npm install --save-dev （packageをpackage.jsonのdevDependenciesに入れる）
- npm install gulp -g （gulpをインストール）
- gulpfile.jsにタスクなどを定義してく

## ディレクトリ構造（サンプル）
prod：本番にあげるファイル
work：フロント開発関連ファイル
workの中で作業して一通り作業が終わったらビルド＋デプロイ

```
.
├── .git
├── prod
│   ├── css
│   ├── img
│   ├── index.html
│   └── js
└── work
    ├── .bowerrc
    ├── .csslintrc
    ├── .editorconfig
    ├── .gitignore
    ├── .jshintrc
    ├── .tmp
    ├── README.md
    ├── bower.json
    ├── gulp
    │   ├── aliases.js
    │   ├── clean.js
    │   └── copy.js
    ├── gulpfile.js
    ├── node_modules
    ├── package.json
    └── src
        ├── _data
        ├── _sass
        ├── _stylus
        ├── _template
        ├── bower_components
        ├── img
        └── js

```

## すること
- [gulp-connect](https://www.npmjs.com/package/gulp-connect)：サーバーたててブラウザ更新
- [gulp-compass](https://www.npmjs.com/package/gulp-compass)：sassコンパイル
- [gulp-watch](https://www.npmjs.com/package/gulp-watch)：変更を監視
- [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)：ンダープリフィックス
- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)：画像最適化
- [gulp-clean](https://www.npmjs.com/package/gulp-clean)：削除とコピー
- [run-sequence](https://www.npmjs.com/package/run-sequence)：タスクを走る順番を管理
- [del](https://www.npmjs.com/package/del)：削除

## できたらいいこと
- [gulp-concat](https://www.npmjs.com/package/gulp-concat) ：ファイル連結
- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify) ：変数変換
- [gulp-replace](https://www.npmjs.com/package/gulp-replace) ：文字列置換
- [gulp-stylus](https://www.npmjs.com/package/gulp-stylus) ：Stylusコンパイル
- [gulp-ftp](https://www.npmjs.com/package/gulp-ftp) ：FTPへデプロイ
- [gulp-rev](https://www.npmjs.com/package/gulp-rev) ：キャッシュバスター
- [gulp-jshint](https://www.npmjs.com/package/gulp-jshint) ：JSリント
- [gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css) ：CSS圧縮
- [gulp-rename](https://www.npmjs.com/package/gulp-rename) ：ファイル名変更
- [gulp-spritesmith](https://www.npmjs.com/package/gulp-spritesmith) ：スプライト
- [gulp-flatten](https://www.npmjs.com/package/gulp-flatten) ：ファイルパス変更
- [gulp-combine-media-queries](https://www.npmjs.com/package/gulp-combine-media-queries)：CSSのメディアクエリまとめる
- [gulp-kss](https://www.npmjs.com/package/gulp-kss)：スタイルガイド作成
- [gulp-bower-files](https://www.npmjs.com/package/gulp-bower-files)：bower_componentsの必要なファイルだけをjs/以下に移動 *Node.jsのバージョンによって使えたり使えなかったり

## タスク
編集中



## gulpファイルのモジュール管理
詳しくは[ここ([Gulp.js] タスク単位のファイル分割)](http://dev.classmethod.jp/client-side/javascript/gulp-js-task-files/)を参照。

- タスクを小分けにJSファイルとして保存
- [recursive-readdir](https://www.npmjs.com/package/recursive-readdir)を使用して小分けファイルを自動的に本体のgulpfile.jsに読み込ませる
- 本体でまとまったタスクを定義
- コマンドでタスクを実行


**小分けされたタスク:**

```
/** gulp/js-taskname.js */
module.exports = function(gulp) {
   // 自動化タスクを定義
}
```

**読み込みもとのgulpfile.js:**

```
/** gulpfile.js */
var gulp      = require('gulp');
var recursive = require('recursive-readdir');
 
gulp.task('recursiveTask', function(callback) {
    recursive('./gulp', function (err, files) {
        files.forEach(function(path, index, arry) {
            path = './' + path.replace('\\', '/' );
            require(path)(gulp);
        });
        callback();
    });
});
 
gulp.task('default', ['recursiveTask'], function() {
    gulp.start(['js-minify', 'css-minify']);
});
```