Gulpを使ってみた。
じめじめ蒸し暑い日が続いておりますが
みなさまいかがお過ごしでしょうか。ひそかです。
すっかり更新が止まってましたが
サーバーでエラーがザクザクでておりまして
見ないふりしてました・・・笑
とはいえブログ以外にも色々と使っているサーバーなので
意を決して先日ようやく無事復旧したわけなんですが
その辺はまぁ別の記事に書くとして
今回は若干今更ではありますがGulpの環境を作ってみたので
忘備録的にそのお話です。
とりあえず最低限ほしい環境としては
—————-
・Compass
・Localhost(Livereload)
—————-
の2つだけなので、まずはそこを目標にします。
1.インストール
Node.jsは既にインストール済なのでGulpのインストールから。
まずは作業用ディレクトリを作って、ターミナルでディレクトリに移動して
以下のコマンドを入力。
npm install gulp -g
Gulpはグローバルとローカルにそれぞれインストールが必要ということなので
まずは-gをつけてグローバルにインストールします。
続いて今度は
npm install gulp --save-dev
として再度インストール。
–save-devオプションをつけることで
ディレクトリのpackage.jsonにインストールしたpackageとバージョンを記述してくれるそうです。
ようするにどんなプラグインをインストールしたかをバージョン付きでメモしておいてくれるってかんじですかね。
とゆわけで、まずはGulpのインストールが完了。
コマンドで
gulp -v
ってうって
[17:39:09] CLI version 3.9.0
[17:39:09] Local version 3.9.0
こんなかんじでバージョンが出てくればOKです。
2.gulpfile.jsを作成
とりあえずインストールが終わったら設定ファイルを作成します。
package.jsonと同じディレクトリにgulpfile.jsというファイルを作成し
以下の一文を記述します。
var gulp = require('gulp');
これでまずは準備おっけー！
3.プラグインを色々いれてみる
とりあえずベースとなるGulpの設定ができたので
続いてプラグインを入れていきます。
今回は前述したとおりCompassとLivereloadができればOKなので
それに関係するプラグインをインストールしていきます。
Compass
Compassを使うのに必要になるのは『gulp-compass』というプラグインです。
『gulp-compass』
https://www.npmjs.com/package/gulp-compass
といっても手順は特に変わらず
npm install gulp-compass --save-dev
コマンドでさくっとインストールします。
続いて、こちらも使用するための設定の記述が必要なので
先ほど作成したgulpfile.jsに設定を追加します。
var compass = require('gulp-compass');
//compass
gulp.task('compass',function(){
gulp.src("common/sass/*.scss") //対象になるscssファイル
.pipe(compass({
config_file: 'config.rb', //compassの設定ファイル
comments: false, //line comment は鬱陶しいので非表示に
css: 'common/css', //書き出すcssファイルの保存場所
sass: 'common/sass' //sassファイルの場所
}));
});
必要最低限の設定しかしてないので、
その他のオプションについては公式サイトから確認してください。
Localhost(Livereload)
当初『gulp-connect』というプラグインを使っていたのですが
こちら非推奨になったようで『gulp-webserver』に切り替えました。
『gulp-webserver』
https://www.npmjs.com/package/gulp-webserver
gulp-webserverにはLivereloadの機能もあるそうなので
これ一つでLocalhostとLivereloadの両方が設定できます。
とゆわけで、こちらもgulpfile.jsに設定を追加。
var webserver = require('gulp-webserver');
//localhost
gulp.task('webserver', function() {
gulp.src('./') //localhostのディレクトリ
.pipe(webserver({
port: 8000, //portを指定する場合はここで
livereload: true, //Livereloadを有効に
open: true //taskが実行された時にブラウザを開く
}));
});
必要最低限の設定しかしてないので、
こちらもその他のオプションは公式ページで確認してください。
4.watchを追加
さて、ほしいプラグインの設定が終わったわけですが
いちいちtask実行するのはめんどいので
watchを追加してファイルの変更を監視することにします。
gulpにはデフォルトでwatchの機能がついてるので
プラグインをインストールしたりする必要はありません。
なので、gulpfile.jsにwatchのtaskを追加するだけでOKです。
//watch
gulp.task('watch', function(){
gulp.watch('common/sass/*.scss',['compass']);
});
これで監視対象のファイルに変更があった場合
自動的にcompassがコンパイルされてcssが書き出されるようになります。
5.エラーでwatchが止まるのを防ぐ
よし、これで安心・・・って思ったらまだ不十分で
このままだとcompassにエラーがあった場合等はwatchが止まってしまいます。
そこで『gulp-plumber』でエラーが出てもwatchが止まらないようにします。
npm install gulp-plumber --save-dev
まずは他のプラグインと同じようにインストール。
そして以下のようにcompassのtaskを書き換えます。
var webserver = require('gulp-webserver'); //追加！！
//compass
gulp.task('compass',function(){
gulp.src("common/sass/*.scss") //対象になるscssファイル
.pipe(plumber()) //この一文を追加！！！
.pipe(compass({
config_file: 'config.rb', //compassの設定ファイル
comments: false, //line comment は鬱陶しいので非表示に
css: 'common/css', //書き出すcssファイルの保存場所
sass: 'common/sass' //sassファイルの場所
}));
});
これでcompassでエラーが出てもwatchが止まらなくなりました。
6.最後に・・・
というわけで、ひと通りの設定が終わったので
最後にgulpを起動した時に走るtaskの設定をして
gulpfile.jsの完成です！
最終的にはこんな感じになりました。
var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var webserver = require('gulp-webserver');
//compass
gulp.task('compass',function(){
gulp.src("common/sass/*.scss") //対象になるscssファイル
.pipe(plumber()) //この一文を追加！！！
.pipe(compass({
config_file: 'config.rb', //compassの設定ファイル
comments: false, //line comment は鬱陶しいので非表示に
css: 'common/css', //書き出すcssファイルの保存場所
sass: 'common/sass' //sassファイルの場所
}));
});
//localhost
gulp.task('webserver', function() {
gulp.src('./')
.pipe(webserver({
port: 8000,
livereload: true,
open: true
}));
});
//watch
gulp.task('watch', function(){
gulp.watch('common/sass/*.scss',['compass']);
});
gulp.task('default',['watch','webserver']);
これでgulpを実行するとwatchとwebserverが実行されて
ブラウザが勝手にlocalhostを開いてくれます。
でもってhtmlとかscssファイルを修正して上書きすると
自動的にコンパイルされてブラウザもリロードされます。
Gruntと比べるとgulpの方が設定ファイルの書き方がわかりやすい印象でしたね。
あと、コンパイルがgulpの方が少し早い感じがします。
watchとかLivereloadとかもgulpの方が設定楽だったかな～・・・
やっぱり開発環境が整うとちょっと楽しくなりますね 笑
──────────────────────────────────────────
参考サイト
──────────────────────────────────────────
『Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ』
http://liginc.co.jp/web/tutorial/117900
『gulp-webserverでWebサーバー/ライブリロード』
http://qiita.com/oreo3@github/items/8b3bff9aed7b10ebe757
『compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう』
http://ichimaruni-design.com/2015/02/comapss-gulp/
『これからはじめるGulp』
http://whiskers.nukos.kitchen/2014/12/01/gulp-adv-cal.html
コメントを残す