Gulpを使ってみた。Gulpを使ってみた。Articleじめじめ蒸し暑い日が続いておりますがみなさまいかがお過ごしでしょうか。更新が止まってましたがサーバーでエラーがザクザクでておりまして見ないふりしてました・・・笑とはいえブログ以外にも色々と使っているサーバーなので意を決して先日ようやく無事復旧したわけなんですがその辺はまぁ別の記事に書くとして今回は若干今更ではありますがGulpの環境を作ってみたので忘備録的にそのお話です。最低限ほしい環境としては—————-・Compass・Localhost(Livereload)—————-の2つだけなので、まずはそこを目標にします。1.インストールNode.jsは既にインストール済なのでGulpのインストールから。作業用ディレクトリを作って、ターミナルでディレクトリに移動して以下のコマンドを入力。-gGulpはグローバルとローカルにそれぞれインストールが必要ということなのでまずは-gをつけてグローバルにインストールします。--save-devとして再度インストール。–save-devオプションをつけることでディレクトリのpackage.jsonにインストールしたpackageとバージョンを記述してくれるそうです。ようするにどんなプラグインをインストールしたかをバージョン付きでメモしておいてくれるってかんじですかね。ゆわけで、まずはGulpのインストールが完了。3.9.0こんなかんじでバージョンが出てくればOKです。2.gulpfile.jsを作成とりあえずインストールが終わったら設定ファイルを作成します。package.jsonと同じディレクトリにgulpfile.jsというファイルを作成し以下の一文を記述します。require('gulp');これでまずは準備おっけー!3.プラグインを色々いれてみるとりあえずベースとなるGulpの設定ができたので続いてプラグインを入れていきます。今回は前述したとおりCompassとLivereloadができればOKなのでそれに関係するプラグインをインストールしていきます。CompassCompassを使うのに必要になるのは『gulp-compass』というプラグインです。--save-devコマンドでさくっとインストールします。続いて、こちらも使用するための設定の記述が必要なので先ほど作成したgulpfile.jsに設定を追加します。}));});必要最低限の設定しかしてないので、その他のオプションについては公式サイトから確認してください。Localhost(Livereload)当初『gulp-connect』というプラグインを使っていたのですがこちら非推奨になったようで『gulp-webserver』に切り替えました。『gulp-webserver』https://www.npmjs.com/package/gulp-webservergulp-webserverにはLivereloadの機能もあるそうなのでこれ一つでLocalhostとLivereloadの両方が設定できます。ゆわけで、こちらもgulpfile.jsに設定を追加。}));});必要最低限の設定しかしてないので、こちらもその他のオプションは公式ページで確認してください。4.watchを追加さて、ほしいプラグインの設定が終わったわけですがいちいちtask実行するのはめんどいのでwatchを追加してファイルの変更を監視することにします。gulpにはデフォルトでwatchの機能がついてるのでプラグインをインストールしたりする必要はありません。gulpfile.jsにwatchのtaskを追加するだけでOKです。自動的にcompassがコンパイルされてcssが書き出されるようになります。5.エラーでwatchが止まるのを防ぐよし、これで安心・・・って思ったらまだ不十分でこのままだとcompassにエラーがあった場合等はwatchが止まってしまいます。そこで『gulp-plumber』でエラーが出てもwatchが止まらないようにします。--save-devまずは他のプラグインと同じようにインストール。以下のようにcompassのtaskを書き換えます。}));});これでcompassでエラーが出てもwatchが止まらなくなりました。6.最後に・・・というわけで、ひと通りの設定が終わったので最後にgulpを起動した時に走るtaskの設定をしてgulpfile.jsの完成です!最終的にはこんな感じになりました。gulp.watch('common/sass/*.scss',['compass']);});gulp.task('default',['watch','webserver']);これでgulpを実行するとwatchとwebserverが実行されてブラウザが勝手にlocalhostを開いてくれます。もってhtmlとかscssファイルを修正して上書きすると自動的にコンパイルされてブラウザもリロードされます。Gruntと比べるとgulpの方が設定ファイルの書き方がわかりやすい印象でしたね。あと、コンパイルがgulpの方が少し早い感じがします。