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

Categories: gulp。, WEB。

コメントを残す