タスクランナーのgulp.jsを導入したので経緯や使い方

2014.11.7

Webの流れに乗ろうと必死な(乗れていない)僕ですがこの度gulpを導入しました。

簡単に経緯

きっかけは数日前の先生との会話。

先「最近gulp入れてさ〜。便利なんだよあいつ。くうすけパイセンも入れよーぜ。~~あとemacs~~」

俺「なんですかそれ。(-∀-).o0(某チョコ菓子に名前が似てる…)」

gulp

Gruntのようなタスクランナー。タスクを登録しておいて、それらを自動で実行してくれる。

最近はGruntよりこっちの方がいいという声が増えてきてるんだとか。

Gruntは知っていたのですが、結局何ができるんだとチラッと調べてみると、

gulpができること

Sass / LESSのコンパイル
ベンダープレフィックスの付与
CSSやJavascriptの圧縮
ブラウザのリロード

こんな感じのこととかとか他にもいろいろ。

さらにこれを自動化できる。

ただ、この辺ってPreprosで出来るよねって思うといわゆる黒い画面といわれるターミナルを使うこと(以前は少し使っていました)やその他色々の理由で使うのを拒んでいました。

ですが、最近CUIのツールがちらほら出てきているような気がしたり、今後必要になってくるんだろうなってことでこの機会に慣れよう(思い出そう)っていう思いもあって導入しました。あと、実は調べてないだけでもっと色々便利なこと出来るんじゃないのって期待。

導入方法

※Macの場合です。

Node.jsのインストール

gulpを動かすためにはNode.jsを入れておく必要があるので、まずはNode.jsをインストールします。

nodejsのページからDLするのが一番楽っぽいです。

終わったら一応

node -v

でちゃんと入っているかを確認しましょう。

入っていたらバージョンが出るハズ。

package.jsonの作成

package.jsonはgulpで何のモジュール(プラグインみたいなやつ)を入れたのかまた、そのバージョンなんかが記録されます。

npm init

それぞれの質問に答えていくと、package.jsonのファイルができます。

ちなみに、gulpの入っている環境であれば、package.jsonファイルがあるフォルダで

npm install<code></pre>
<p>を使えば、必要なモジュール(プラグインみたいなもの)が簡単に入れられます。</p>
<h3>gulpのインストール</h3>
<pre><code>
npm install -g gulp
<code></pre>
<h2>実際に使ってみる</h2>
<h3>Sassのコンパイルをしてみる</h3>
<p><small>compassも使えます。</small><br />
まずはSassをコンパイルするプラグインをインストール</p>
<pre><code>
npm install --save-dev gulp-ruby-sass

–save-devを付けることで、package.jsonに記述されるので、複数人でプロジェクトを進める時には便利そうです。

タスクの追加

gulpfile.jsにSassをコンパイルするタスクを記述

var sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
  gulp.src('scss/**/*.scss')
    .pipe(sass({
        style: 'expanded',
        compass : true
    }))
    .pipe(gulp.dest('css/'));

scssというフォルダ内のscssファイルを監視して、変更があればコンパイルして、cssフォルダに入れてくれるようになります。sass記法派な人やファイル構造違うんだけどって人は適宜修正してください。

実際実行するときは、以下のコマンドで上のタスクを実行してくれます。

gulp sass

ただし、このままだとコマンドを実行した時一度しかタスクを行ってくれないので、タスクの自動化をしましょう。

タスクの自動化

gulpfile.jsに以下を追記

gulp.task('watch', function () {
    gulp.watch('scss/**/*.scss', ['sass']);
});

これのタスクを実行することにより、記述のミスなどでエラーが起こらない限りずっと監視してくれます。

エラーが起こっても監視してくれるプラグインもあるのでぜひ探してみてください。

実行するときは、

gulp watch

この辺のタスクはdefaultにして、gulp で実行出来るようにするのを見かけますが、個人的にはgulpさん監視よろしく！って感じで実行したいので、watchにしています。(受け売り)

参考に、僕が普段使っているものgulpfile - github

導入の参考にしたもの

導入してみて

まだ少し使っただけですが、設定ファイルをサクッと書くだけでこれだけのことをしてくれるのはすごくありがたい。あと色んな所で書かれている通り、設定ファイルの書き方とか分かりやすい(自分で何も見ずに書けるとは言ってない)ので、何をやってるのかが分かるので気持ち悪くない。

ターミナル(所謂黒い画面)を使うので、人によっては抵抗があるかもしれないけど、個人的にはgulpを走らせて結果が出た時が快感だった。

Node.js入れたりgulp.js入れたりっていう最初の行程がめんどくさい感じがしますが、入れるときっと幸せになれるのでぜひぜひ。

gulp-ruby-sassなどモジュールの更新があり、書き方が変わったモノがあります。今回の記事で書いたものはあくまで執筆時のバージョンなので、最新のモノはnpmのページを参照してください。