CREATOR BLOG

gulp入門その1―とりあえず動かすところまで

2015/01/16
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)

去年の11月辺りから、メインマシンがWinからMacに変わりました。
Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、

メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。
今回は、簡単なタスクを登録して動かすところまで。
その2で、ファイルの監視や同期処理などを覗いていきたいと思います。

もくじ

  • タスクランナーってなに?
  • Gruntとgulp
  • 必要なものを準備する
  • タスクを書いて、実行しよう
  • まとめ

タスクランナーってなに?

メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に

(´-).。oO(いっちょ最近流行りのタスクランナーでも入れてみようかね…)

と思い立った次第です。
大学時代のトラウマから黒い画面はあまり好きではないのですが、そうも言ってられないのでリハビリも兼ねて。

そもそもタスクランナーとは繰り返し行う処理を予め登録しておいて、必要なときに簡単に呼び出し・実行できるようにしようぜ!といった趣旨の自動化ツールです。
その呼出タイミングも、

  • 手動で呼び出す
  • 特定のファイルが変更・保存されたら
  • 特定のコマンドが実行されたら
  • 処理Aが終わったら、処理Bへ自動的に移行する

などなど、様々設定できます。便利ですね。

Gruntとgulp

さて、CSSプリプロセッサにSassとLess(他にもいろいろありますが)があるように、タスクランナーにもいわゆる有名ドコロ的なものがあります。
それがGruntgulpです。

どちらもnode.jsを元に動いています。
両者の違いは一般的にこんな感じ。

Grunt gulp
タスクの書き方 複雑 簡単
処理速度 遅い 早い
プラグインの量 多い 少ない

簡単に言うと、gulpはちょっと書きやすくなったGruntの後続、って感じでしょうか。
今回は単純に社内で使っている人が居なかったのでgulpにしてみました。(Gruntは居たので比較したかった)

最近ではgulpのプラグイン量も増えてきていて、書きやすいこともあり「1から始めるならgulp」という風潮もあるとか、無いとか。とか。

必要なものを準備する

前述のとおりnode.jsで動いているのでnodeが必須です。
それ以外は、用途に合わせて必要な物を入れていくとよいでしょう。
gulpは単体では単に粛々と登録されたタスクをこなす程度なので、いろいろなことをさせたい場合はプラグインが必須になります。

これより下はMacでの記事になります。
基本的な方法はWin/Mac変わりませんが、実行の際のコマンドが異なります。
Winユーザーは適宜コマンドをWinに置き換えてください。

node.jsを入れる

node.jsを落としてきます。
http://nodejs.org/
トップにある「INSTALL」からでも、下層のダウンロードからでも落とせます。
インストーラを起動した後は、何も気にせずポチポチしていけばよいと思います。(気にならなければ)
黒い画面で

と実行して、バージョンが出ればインストール完了。

グローバルにgulpを入れる

node.jsのパッケージマネージャに、npmというものがあるのでこれを使ってパッケージを落としてきましょう。

うまくいかない場合は「$ sudo npm install -g gulp」で実行すると、管理権限での実行になるのでよいかも。
こちらも

でバージョンが出れば完了。

作業用ディレクトリにgulpを入れる

上の項では、グローバルにgulpを入れました。
実際使用する際には、作業するディレクトリ(プロジェクトのディレクトリ)直下にgulpをインストールする必要があります。
まず、作業ディレクトリに移動します。

そこでgulpをインストール。

途中で、プロジェクト名やら色々訊いてきますが基本スルー(Enter)で大丈夫。この項目はあとで変えられます。(後述)
これで、該当ディレクトリにgulpがインストールされました、やっほいヽ(=´▽
=)ノ

その他プラグインを入れる

前述のとおり、gulpでちょっと凝ったことをしようと思うとプラグインが必須になります。
ここでもnpmを使ってダウンロードしていきます。

インストールしたいプロジェクト直下(gulpが入っているところ)にて

を実行すればOKです。
http://gulpjs.com/plugins/
ここからプラグインを検索することができるので、気に入ったものを探してみるのも楽しいです。

package.jsonってなに?

プロジェクト毎にプラグインを入れると、新規プロジェクトの時に1から全部入れるの面倒じゃない?
って思っていたのですが、どうやらそうでもないようです。
gulpをインストールしたディレクトリに、package.jsonというファイルが生成されていてこれを利用することで他のプロジェクトにも転用できるようです。
package.jsonの中身はこんな感じ。(一例です)

プラグインのインストールの際に「--save-dev」を付けることで、devDependencies部分に自動追記されるようです。便利。
ちなにに、プロジェクトの初期設定はここから変更できます。

これでひと通り必要な物は揃ったので、実際に動かしてみたいと思います。

タスクを書いて、実行しよう

タスクを書く

まず、タスクを設定してみます。
新規でgulpfile.jsというファイルを作成し、そこに記述していきます。
保存場所はpackage.jsonと同じように、作業ディレクトリ直下に。
一行目に

と書いてあげれば準備完了です。

基本的にタスクは、

こんな感じで定義できます。.pipe()で処理をつなげていくイメージ。
MiniMatchパターンとは、node.jsで使われるpath match用のライブラリです。
検索すると色々引っかかってきますが、個人的にはこちらを参考にさせて頂きました。
minimatch(node.js で path match するライブラリ)のチートシートを作った

今回はgulp-ruby-sassを使って、sassのコンパイルをするタスクを書いてみます。
※事前にsassが入っていることが前提になっています。

詳しいオプション等はこちらからドウゾ→gulp-ruby-sass
ちなみに、gulp-sassというプラグインもありますが、こちらはnode-sassが必要になります。

これで、sassCompileという名前のタスクが設定出来ました。

タスクを実行する

実際にタスクを動かしてみましょう。

ターミナルから

とすることで、該当のタスクを実行できます。
なので、先ほどのタスクは

としてあげればOK!

まとめ

ひとまず、gulpを動かすところまで出来ました!
しかし、sassのコンパイル等はファイルの変更があったら自動的にコンパイルして欲しいですよね(´・ω・`)
なので、次回は

  • ファイルを監視する
  • 処理を同期的にする
  • その他細かいこと

なんかを書ければいいかなぁ、と思っています。

ざざっとですが、触ってみるとタスクの書き方は結構簡単でした。
というかわかりやすい。
gulpのプラグインも増えてきているので、いろいろ漁って環境を整えていくと気持ちいいですね。
それでは今日はこのへんで!

この記事を書いた人

atsuko.aフロントエンドエンジニア

猫派の甘党、胃が弱い系WEB屋。 コーディングしたり、たまにデザインしたりします。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive