手順
- 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']);
});