仕事で初めて使ってみて、便利だったので導入方法を書いてみます。
ちなみにQiitaも初書き。
Gulpとは
Node.js製タスクランナー
- Sassのコンパイル
- ブラウザのリロード
- HTML、CSS、JavaScriptの最適化
- 画像の最適化
- ローカルWebサーバー立ち上げ
などの作業をタスクに登録すると、
ファイルの更新タイミング等でタスクを自動実行してくれます。
gruntと似たものらしい（私はgruntを使った事がないですが)
メリット
- 設定ファイル(gulpfile.js)がGruntより記述しやすい
- Gruntより速い
- Gruntより後発で新しい感
デメリット
- 複雑なことは敷居がやや高め、javascript知識が多少は必要
- ドキュメントが少ない（最近は増えてきた？
インストール手順
まず前提条件でNode.jsをインストールしておきます。
gulpをインストール
$ npm install -g gulp
$ gulp -v
エラーが出る場合sudoをつけて実行します。
バージョン情報が見れれば完了。
ローカルインストール
プロジェクト毎にインストールします。
ローカル用は１つのプロジェクト（フォルダ）に毎回入れます。
$ mkdir dev_gulp
$ cd dev_gulp
$ npm init
プロジェクトのフォルダを作成し、npm init を実行すると項目の入力を要求されます。
使うだけならとりあえずENTERで進めます。
入力が完了すると、package.json ファイルができます。
$ npm install --save-dev gulp
--save-devをつけることによって、開発用のローカルインストールになります。
package.jsonと同じ階層に、gulpfile.jsを作成します。
$ touch gulpfile.js
あとはプラグインをインストールして、gulpfile.jsにタスクを書いていきます。
プラグインをインストール
ここではsassのコンパイルプラグインを入れて、gulpでsassコンパイルをしてみます。
フォルダ構成
gullpfile.jsの同階層にappフォルダ、その配下を作成
gulpfile.js
app
├index.html
├css
└sass
└common.scss
scssファイルを作成
common.scss
h1{
font-size: 14px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}
p{
font-size: 12px;
padding: 0;
}
gulp−sassをインストール
$ npm install --save-dev gulp-sass
インストール完了し、nodemodulesフォルダ配下にgulp−sassフォルダができたら、gulpfile.jsにタスクを書いていきます。
gulpfile.js
//gulp
var gulp = require('gulp');
//gulp-sass
var sass = require('gulp-sass');
//SASSビルドタスク
gulp.task('sass', function(){
//scssディレクトリの指定
gulp.src('app/sass/*.scss')
//.pipeで処理実行
//出力形式の種類 #nested, compact, compressed, expanded.
.pipe(sass({style : 'expanded'}))
//出力先(gulp.dest)の指定
.pipe(gulp.dest('app/css'));
});
’sass’という名前のsassコンパイルを行うタスクを作りました。
gulp sass コマンドで実行してみます。
$ gulp sass
〜
[16:52:21] Starting 'sass'...
[16:52:21] Finished 'sass' after 9.66 ms
上記のようにFinishedと出れば無事完了。
cssフォルダ内にコンパイルされたcssが吐き出されます。
その他のプラグイン
- gulp-autoprefixer cssのベンダープレフィックスを自動付与
- gulp-webserver ローカルwebサーバーを起動
- gulp-plumber gulp watch中にエラーが発生してもgulpを終了させない
- browser-sync ブラウザ同期、スマホでも開発環境のチェック可能になる
- gulp-minify-css cssをミニファイしてくれる
- gulp-watch 監視タスクより後に作成したファイルも監視できる
環境を配布・共有
開発者それぞれが環境を用意したのでは非常に手間ですので、ここまでにやった設定を配布・共有してみます。
やりかたは簡単でgulpfile.js、package.jsonの２つを共有するだけです。
環境構築したいPCで、同じようにフォルダを設置して以下を実行するだけ。
（node.js、gulpのインストールは行っておく）
$ npm install
これはプラグインを最初にインストールした時に、package.jsonにプラグイン情報が残るからです。
"devDependencies": {
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4"
}
こんな風に。この情報から自動で必要なものがインストールされます。
gulpは個人的にも利用していきたいので、
今後もプラグインについて書いていく予定。