青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

gulp導入をイチからしてみたら3ステップで終わった

このエントリーをはてなブックマークに追加

f:id:cocoro27:20160619021054j:plain

パソコンを買い換えましたあろえりーな(@aloerina_)です。
パソコン買い換えて、新しいプロジェクトも作って、とくれば次にすることは「タスクランナーの準備」でしょう。

タスクランナーとは
「アプリをつくり上げる」って結構めんどうなもんで、単にソースを書けばいいだけじゃないんですよね。ソースがエラーのないものかチェックしたり、フォーマットを整えたり、画像を圧縮したり…細かな作業が多いのです。そういった面倒な処理を自動でやってくれる仕組みをタスクランナーと言います。とくにフロントエンドで活躍するので、エンジニアだけでなくWEBデザイナーさんにもぜひ活用してもらいたい一品。

タスクランナーの二大巨塔といえば GruntGulp です

2016/09/25追記
Gruntはタスクランナーですが、Gulpはビルドシステムでした。GitHubにおもいきり「The streaming build system」って書いてあります。

一長一短ですが個人的にGulpのほうが好きなのでGulpを導入します。3ステップ・3分で導入できてしまいますよ。 それでは参りましょう。

f:id:cocoro27:20160619021310g:plain





手順の確認

  1. Node.jsのインストール
  2. Gulpのインストール
  3. Gulpに実行してもらうためのファイルを用意

gulpはNode.jsを土台としていますので、まずはNode.jsを導入するところからです。Node.jsに続けてGulpをインストールしますが、Gulpに関することは基本的にコマンドライン(またはターミナル)で行います。真っ黒な画面コワイという人もいるかもしれませんが、コピペでできることだけなので大丈夫。 ちなみに、Node.jsやGulpのインストールは管理者権限で行いましょう。OS X ではコマンドの先頭に sudo とつけると管理者権限となります。




Node.jsのインストール

下記サイトからNode.jsをインストールしましょう。それだけです。

Node.js

インストール後はコマンドラインで以下のコマンドをうちましょう。 バージョンが表示されたらインストール完了です。古いWindowsだとPC再起動しないとバージョン情報が出ないなんて話もありますが、もう忘れました。昔のことです。

$ node -v




Gulpのインストール

パソコンそのものにインストール

$ npm install -g gulp-cli

いきなりですが、これで完了です。あなたのパソコンでいつでもGulpが使えるようになりました。
コマンドの意味を補足しておくと、「NPM(Node Packaged Modules)というNode.jsをつかって動くモノコレクションの中から、「Gulp」をグローバルに使えるようにインストールしてくださいね!」という感じです。そう、-gはグローバルのG。



プロジェクトごとにもう一度インストール

今度はGulpを使いたいプロジェクトのフォルダにGulpをインストールします。

$ npm install gulp

これでOK。package.jsonという開発物の概要を記したファイルを用意してある場合は、コマンドにオプションを付け足すことで「Gulpを利用する旨とそのバージョン情報」を書き足してもらえます。

$ npm install --save-dev gulp

この引数はNPMから何かをインストールするときに使えるので、package.jsonで関連ライブラリ等をきちんと管理したい場合には覚えておくと便利です(便利でした)。

ここまでで導入は完了です!はやい!あとは実行するためのファイルを用意するだけ。ちなみにここまでの流れがわかる動画がありました。世の中って便利。




Gulpに実行してもらうためのファイルを用意

Gulpをインストールしたフォルダにgulpfile.jsをつくります。ここに「Gulpにどんなタスクをどのように実行してほしいか」を記載すると、それにしたがって実行してくれます。ありがたや。

  • Gulpへお願いするタスク(が書かれたソース)をインストール
  • タスクを実行してもらうようgulpfile.jsを実装
  • Gulpの実行

やることはこんな感じ。例として画像圧縮タスクをお願いしてみましょうか。


タスクモジュールをインストール

$ npm install gulp-imagemin

これで画像圧縮タスク(のソース)がインストールされます。そろそろインストールにも慣れてきますね。


gulpfile.jsを実装

まるまるコピペしちゃいましょう。コメントアウトを読みながら、なんとなーく各行の内容がわかれば、自分でタスクを追加できる日も近い…んじゃないかな…!


Gulp実行

$ gulp imageminTask

いよいよタスクランナー実行です!さきほど登録したimageminTaskというタスクを実行せよ!とコマンドにうちこむと…

続きは君の目で確認してみよう!
安い攻略本かったらラストダンジョンのボスやらアイテムやらが全部「???」になっていて、こういういかがわしいセリフが書かれてたりするよね…。




まとめ

  1. Node.jsのインストール
  2. Gulpのインストール
  3. Gulpに実行してもらうためのファイルを用意

という感じでした。1と2(パソコンへのインストールまで)は1回限りしかしないことなので、今後Gulpをつかって開発をしていこうという場合は2回目以降の導入がものすごく楽です。しかも一度書いたgulpfile.jsは別のプロジェクトで再利用できることも多いので、楽すぎて仕事したくなくなる。だから逆に最初の1回の導入方法を忘れがちなのでまとめました。備忘録です。

ゆくゆくはタスクランナーが菓子パンとか買ってきてくれるようにならないかな…。

TOP