いまさら感が強いんですが、世の流れ的に、フロントエンド開発ではSCSS(SASS、LESS等)、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。私はその辺の技術の取り込みがおっくうで、ついついCSSやJavaScriptを素でコーディングしてしまったりしていたのですが、最近やっている Ruby on Rails の開発でCoffeeScriptでJavaScript書いてみて、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地に達しました(いやはや、ようやくですねぇ…)。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境を業務マシンであるWindowsマシンに作ってみようかと思います(WEBサービス側のCentOS(Linux)環境への導入はこちらの記事を参照)。
なお、なぜビルドツールをGruntではなくGulpにしたかというと、今どきのトレンドはGulpの方かなぁ…という漠然な理由だったりするんですが、まぁ、Gruntより設定ファイルが記述しやすく、複数リソースの設定があっても設定が煩雑化しないというメリットもあるからです。
Node.js のインストール まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールします。 インストールは簡単で、Node.jsの公式サイトからインストーラーをダウンロードするだけです。私の業務用マシンは「Windows7(64bit版)」だったので、node-v0.12.0-x64.msi というファイルが対象になります(2015年3月4日時点のNode.jsのバージョンは0.12.0です)。 インストーラがダウンロードできたら、早速起動させます。いくつか対話が発生しますが、特に注意しないといけないようなインストール設定はありません。 イントールが完了したら、コマンドプロンプト(もしくは、パワーシェル)から、Node.jsのバージョンを確認してみます。
> node -v v0.12.0 ついでにバンドルでインストールされているnpmのバージョンも確認してみます。
> npm -v 2.5.1 これでNode.jsのインストールは完了です。
Gulp のインストール 次にGulpをグローバルにインストールします。
> npm install -g gulp > glup -v [**:**:**] CLI version 3.8.11 これでインストール完了です。もしインストールに失敗するようなら、
> npm install -g gulp --mscs_version=2012 ──とオプションを付けてみると上手くいくかもしれません。 次に、ローカルにインストールします。 ローカルにインストールするにあたっては、npmの初期化を行う必要があります。まず任意にgulpを実行したいディレクトリを作成します。この記事では、C:\npm\node_modules\gulp というディレクトリを新たに作成しています。
...