ど〜も〜、文明開化の足音を発するエンジニア 中尾こと、 Hawk(と呼ばれたい) です。
皆さん、コーディング生活エンジョイしてますか?
私は普通です。
最近、ある案件で 「sassを使いたいが、環境はない!」 というなんとも男らしい案件に遭遇しました。
検討の結果、速度や拡張性も考え gulp を使うことになりました。
今まで他人が作った秘伝のタレを使ってぬるま湯コーディングを行なっていたので、一から開発環境をつくって見ました!

そもそもgulpってなんやねん!

gulpとはいわゆるタスクランナーとか、ビルドシステムヘルパーと呼ばれています。
node.jsを基にして動いています。
ちなみに公式ではこのように説明されていました。
「gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.」
なるほど〜(全然わからん。)
要は、「めっちゃ便利なヤツやで〜、使ってや〜」 てことが言いたいんだと思います(超訳)
私の英語音痴が判明したところで、実際に gulp でできる事をあげていこうと思います。
gulp では、画像の圧縮、sassやpug(jade)と言われるメタ文言 のコンパイル、簡易ローカルサーバ立ち上げなど色々なことができます。
フロントのみで完結するような案件では是非使って行きたいですよね!
パッケージを入れる事で色々な機能を追加できるのですが、今回実現したい内容をあげると、とりあえずこんな感じ。

目指す開発環境(願望)

  • sassの自動コンパイル
  • pug(jade)の自動コンパイル
  • jsの圧縮
  • 更新時ブラウザの自動リフレッシュ
  • ベンダープレフィックスの自動付与
  • metaのjson管理
  • ES6はいいや、、、

ちなみにタスクランナーをドヤ顔で使っていると、うちの重鎮「ゆとり乙」と罵られます。。。

まずはnode.jsを!

ひとまず最初にnode.jsをインストールしましょう!
手軽にサックっとインストールするのであれば、パッケージ版をインストールしましょう!

サクッとnode.jsをインストールする。

いくつかのnode.jsを用途に応じて切り替えたい場合は nvm(Node Version Manager) を使用するのが良いでしょう。
今回は、nvmの設定方法は めんどくさい 大変なので、パッケージ版でいいんじゃないですかね?(適当)

gulpの下準備!

「まだあわてるような時間じゃない」 と、あるバスケ選手が言っているように
gulpに触りたい気持ちをグッと抑えて、下準備をしましょう!
まずはディレクトリを作ります。
適当な名前で新規フォルダを作りましょう!
今回はgulp_templateという名前にしました!

その後、ターミナルまたはコマンドプロンプトでそのディレクトリまで移動し、下記を実行!

npm init

すると、いろいろ掘り葉ほり聞かれますが、後から変更もできますので、ここは enter連打 で乗り切りましょう!
無事乗り切ると、ディレクトリ内に package.json が生成されるはずです!

gulp_template
 └ package.json … mpnファイル

ちなみに、中身はこんな感じ。

{
  "name": "gulp_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulp.jsをインストール!

いよいよ、今回のメインイベント(?)gulp選手の出番です!
ターミナルまたはコマンドプロンプトで下記を入力してください!!
※macの方は sudo 付きで

まずは、グローバルにインストーーーーーール!!

npm install gulp -g

続いてgulpを使いたいディレクトリに移動し、ローカルにもインストーーーーーール!!!!

npm install gulp --save-dev

「へっへっへ、手こずらせやがって、、、」

すると、先ほど作成した package.json 内に下記のような記述が追記されているかと思います。

"devDependencies": {
    "gulp": "^3.8.8"
}

これは何かというと、npm install コマンドを実行すると、このdevDependencies 内に書かれているパッケージが自動的にインストールされるて node_modules のディレクトリに保存されるというとても素敵機能になります!

そのためgit管理する際は、容量の多い node_modules ディクトリごとをgitignoreすればgit管理が楽になります!

次回予告

ようやく gulp のインストールに成功したHawk(と呼ばれたい)
しかし、それはこの物語の序章にも過ぎなかった。
様々な困難を見事と突破し、無事 gulp環境 を構築することはできるのか!?
次回、「gulpfileの価値は」
お楽しみに!
> 第弐話を見てみる

Shere
  • はてなブログ
  • Twitter
  • Facebook
今更ながら一からgulpなるものをイジってみた 第壱話 〜gulp、誕生〜

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。