gulp入門その3―こまごま便利なこと
- 2015/02/27
- atsuko.a
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。
今回は、細かい便利な機能をgulpに乗せてみましょう。
今までの記事はこちら
もくじ
- 同期処理をする
- ローカルサーバを立ててライブリロードする
- CSSのminifyしたりプロパティを並び替えたりする
- package.jsonでモジュールを管理する
- まとめ
※今回は手順にプラグインのインストールを含めません。
インストール方法は前回・前々回の記事を参照にしてください。
同期処理をする
初回からさんざん書く書く言っていた同期処理です。
そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。
そこでrun-sequenceを使いましょう。
このプラグインを使うと複数タスクの並列/直列処理が設定できます。
例として、↓の図のような処理遷移をしてほしいとします。
点線部分のsass/guide/copyはそれぞれ並列(=非同期処理)です。
つまり、lint→sass/guide/copy→combの順番で処理したいということ。
1 2 3 4 5 6 7 8 |
var runSequence = require('run-sequence'); gulp.task('build', function(callback) { runSequence('lint', ['sass', 'guide', 'copy'], // ここは並列 'comb', callback); }); |
buildタスクを実行すれば、lint→sass/guide/copy→combと処理してくれます。
基本は直列ですが、[]で囲った部分が並列処理になってくれます。
直列処理ができるからと言って無闇矢鱈に使っていると処理が当たり前のように重くなるので、ご利用は計画的に。
ローカルサーバを立ててライブリロードする
ajax処理やプラグインの関係で、ローカル環境では上手く動かないときにはローカルサーバを立てましょう。
gulp-webserverを使います。
1 2 3 4 5 6 7 8 9 |
gulp.task('webserver', function() { gulp.src(app) // 対象ディレクトリ .pipe(webserver({ livereload: true, // ライブリロードを使う(true/false) port: 9000, // localhostのポート番号 directoryListing: true // ディレクトリ一覧を表示する(true/false/object) open: true // サーバー起動時にブラウザで開く(true/false) })); }); |
基本的にはこれでOK、localhost:9000に仮想サーバの出来上がりです。
ライブリロードの有無も選べるので便利、ファイルの変更があると自動的にブラウザを更新してくれます。
他にもオプションがあるので詳しくはそちらを。
1 |
gulp.task('default', ['webserver', 'watch'], function() {}); |
こんな感じでデフォルトタスクに監視タスクと一緒に突っ込んでおくと、
デフォルト実行するだけでファイルの監視をしつつローカルサーバをたててブラウザで開いてくれます。便利!
ちなみにnode.jsで動いているので、PHPはこのローカルサーバでは動きません。
CSSのminifyしたりプロパティを並び替えたりする
CSSのminifyにはgulp-minify-css、
プロパティの並び替えにはgulp-csscombをそれぞれ使います。
gulp-minify-css
まずは、minifyから。
node.jsのライブラリclean-cssをラッパーしたプラグインのようです。
1 2 3 4 5 6 7 8 9 |
var minifyCSS = require('gulp-minify-css'); gulp.task('minify', function(){ gulp.src('css') .pipe(minifyCSS({ keepBreaks: true // 改行を保持する(true/false) })) .pipe(gulp.dest('./build/css')); }); |
特殊コメント(/*! */)以外のコメントを削除しつつminifyしてくれます。
↑のように改行を保持したりだとか、オプションがいろいろあるようです。
JSのminifyはこちら→gulp-uglify
gulp-csscomb
次にプロパティの並び替え
こちらもcsscombというツールのラッパー的なやつ。
1 2 3 4 5 6 7 |
var csscomb = require('gulp-csscomb'); gulp.task('minify', function(){ gulp.src('css') .pipe(csscomb()) .pipe(gulp.dest('./build/css')); }); |
タスク自体はこれでOKですが、実際どんな順番で並び替えたいかの設定が別途必要です。
json形式の設定ファイル.csscomb.jsonをgulpfile.jsと同じディレクトリに入れておけば大丈夫。
デフォルトで3つ用意されてるので、そこから引っ張ってくるといいかも。
sort-orderの辺りを参考に。
もちろん自分で設定するもよし。
ちなみに、プロパティの並び替えだけでなくホワイトスペースの除去なども一緒にやってくれます。
そこら辺の設定値は24個あるのですが、ここから好みの設定をぽちぽちしていくと最後にまとめて吐き出してくれるのでコピペすると便利ヽ(=´▽`=)ノ
好きな吐き出し形式をを選んで、
出てきた設定を.csscomb.jsonにコピペ。らくちんですね(ΦωΦ)
package.jsonでモジュールを管理する
正確にはgulp自体の機能ではなく、node.jsのモジュール全体の話ですが。
初回の記事にて「package.jsonを利用することで他のプロジェクトにも転用できるようです」と書きましたが、実際の方法を見てみましょう。
package.jsonを用意します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "name": "[プロジェクトの名前]", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "[gitのレポジトリURL]" }, "author": "", "license": "ISC", "devDependencies": { // プラグイン一覧 "gulp": "~3.8.10", "gulp-cssmin": "~0.1.6", "gulp-styledocco": "0.0.1", "gulp-autoprefixer": "~2.0.0", "gulp-imagemin": "~2.0.0", "gulp-ruby-sass": "~0.7.1", "gulp-plumber": "~0.6.6", "gulp-replace": "~0.5.0", "run-sequence": "~1.0.2", "gulp-run-sequence": "~0.3.2" } } |
ターミナルから、新規にgulpを使用したいディレクトリに移動しつつ↓を実行します。
1 |
npm install |
すると、package.jsonに記載されているプラグインがごそっとインストールされます。
こうすると、わざわざnode_moduleディレクトリを移動しなくていいので便利。
バージョン管理ツールを使用しているなら、gulpfile.jsとpackage.jsonがあればタスクの共有ができます。
まとめ
3回にわたってgulp周りの細々した事をまとめてみました。
今回までの内容ができるとひとまずフロントエンドのコーディングは楽になる、かも?
一旦gulp入門は完結ですが、他にもできることがたくさんあるのでそのうちまとめてみたいと思います。
それでは今日はこのへんで!