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：サーバーたててブラウザ更新
• gulp-compass：sassコンパイル
• gulp-watch：変更を監視
• gulp-autoprefixer：ンダープリフィックス
• gulp-imagemin：画像最適化
• gulp-clean：削除とコピー
• run-sequence：タスクを走る順番を管理
• del：削除

できたらいいこと

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

タスク

編集中

gulpファイルのモジュール管理

詳しくはここ([Gulp.js] タスク単位のファイル分割)を参照。

• タスクを小分けにJSファイルとして保存
• 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']);
});