GulpでCSS/JavaScriptコンパイル環境を構築する ─ Windows編

2015年4月07日

maeno

いまさら感が強いんですが、世の流れ的に、フロントエンド開発では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 というディレクトリを新たに作成しています。

> mkdir -p C:\npm\node_modules\gulp
> cd C:\npm\node_modules\gulp
> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp) gulp_build
version: (1.0.0)
description: Gulp-build-test
entry point: (index.js)
test command:
git repository:
keywords: gulp
author: maeno
license: (ISC) MIT
About to write to C:\npm\node_modules\gulp\package.json:

{
"name": "gulp_build",
"version": "1.0.0",
"description": "Gulp-build-test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
},
"keywords": [
"gulp"
],
"author": "maeno",
"license": "MIT"
}

Is this ok? (yes) yes

対話式にいくつか属性値を聞かれるので、任意に入力します（すべてEnterでも可です）。初期化ができたら、早速ローカルにgulpをインストールします。

> npm install gulp --save-dev
> gulp -v
[**:**:**] CLI version 3.8.11
[**:**:**] Local version 3.8.11

--save-dev のオプションはgulpの開発用パッケージをインストールするかどうかの指定なので、特に付けなくても構いません。これでGulpが利用できるようになりました。

Gulpで各種コンパイル

1. SASSのコンパイル

qulpでSASSをコンパイルするためにはSASSプラグインが必要なので、インストールします。

> npm install gulp-sass --save-dev

インストールが終わったら、コンパイル元のCSSソースファイルを作ります。

> mkdir sass | touch sass/style.scss

SCSSファイルの中身：

a {
  color: #88f;
  &:hover {
    text-decoration: none;
  }
}

次にコンパイルタスクを作ります。gulpをローカルインストールしたディレクトリ直下（この例では C:\npm\node_modules\gulp ）に gulpfile.js を作成します。

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

gulp.task('sass', function() {
gulp.src('sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});

タスクができたら、早速コンパイルを実行してみます。

> gulp sass
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'sass'...
[**:**:**] Finished 'sass' after 6.5 ms

これで、CSS フォルダが作成され、その中にコンパイル済みのCSSファイルが書き出されています。CSSファイルの中をのぞいてみると、

a {
  color: #88f; }
  a:hover {
    text-decoration: none; }

おぉ～、きちんとビルドされてますね。これで、Gulp + SASS のコンパイル環境は実装できました。次に、LESSのコンパイル環境を作ってみようと思います。

2. LESSのコンパイル

基本的にSASSと同じ流れになります。つまり、qulpでLESSをコンパイルするためにはLESSプラグインが必要なので、インストールします。

> npm install gulp-less --save-dev

インストールが終わったら、コンパイル元のCSSソースファイルを作ります。

> mkdir less | touch less/style.less

LESSファイルの中身：

@link-color: #88f;

a {
  color: @link-color;
  &:hover {
    text-decoration: none;
  }
}

CSSプリコンパイル環境下で一番重宝すると思われるであろうスタイルのプロパティ値に変数を使ってみたサンプルです。

そして、コンパイルタスクを作ります。gulpをローカルインストールしたディレクトリ直下（この例では C:\npm\node_modules\gulp ）の gulpfile.js を編集します。

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function() {
gulp.src('less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});

今度は、対象ソースを less/ 以下のすべての .less ファイルにしてあります。タスクができたら、早速コンパイルを実行してみましょう。

> gulp less
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'less'...
[**:**:**] Finished 'less' after 8.43 ms

これで、CSS フォルダの中にコンパイル済みのCSSファイルが書き出されています。CSSファイルの中をのぞいてみると、

a {
  color: #8888ff;
}
a:hover {
  text-decoration: none;
}

LESSのコンパイルは、SASSコンパイルよりインデントが整形されていていい感じですね。

3. CoffeeScriptのコンパイル

やり方は、前出のSASS、LESSとほとんど同じで、使うプラグインだけが異なる感じです。まず、CoffeeScriptコンパイル用のプラグインをインストールします。

> npm install gulp-coffee --save-dev

インストールが終わったら、コンパイル元のCoffeeScriptファイルを作ります。

> mkdir coffee | touch coffee/script.coffee

CoffeeScriptファイルの中身：


Home = ->
  $('.button').on 'click', (e) ->
    e.preventDefault()
    if window.confirm "Are you sure?"
      $(@).trigger 'click'
    else
      return false

$(document).ready(Home)

サンプルの中身はjQueryのコードです。.buttonのクラス要素をクリックした時のイベントハンドラにて確認ダイアログを出す処理になっています。

var gulp = require('gulp');
var coffee = require('gulp-coffee');

gulp.task('coffee', function() {
gulp.src('coffee/**/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('./js'));
});

対象ソースは coffee/ 以下のすべての .coffee ファイルになります。では早速コンパイルを実行してみましょう。

> gulp coffee
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'coffee'...
[**:**:**] Finished 'coffee' after 7.68 ms

これで、js フォルダが作成され、その中にコンパイル済みのJavaScriptファイルが書き出されています。JavaScriptファイルの中をのぞいてみると、

(function() {
  var Home;
  
  Home = function() {
    return $('.button').on('click', function(e) {
      e.preventDefault();
      if (window.confirm("Are you sure?")) {
        return $(this).trigger('click');
      } else {
        return false;
      }
    });
  };
  
  $(document).ready(Home);
  
}).call(this);

すばらしい！

ちなみに、Gulpのプラグインはそれぞれで共存できるので、それぞれのタスクをgulpfile.jsにマージしておくことで、SASS、LESS、CoffeeScriptのすべてをコンパイルできる環境にできます。また、Gulpプラグインにはデフォルトで定義しておくべき有効なもの（ベンダープリフィックス自動付与やミニファイなど）が他にも結構あるので、その辺は利用シーンに合わせて探してみると良いでしょう。

これで、ようやく今どきのフロントエンド開発用必要最小限環境が整いました。

Colorkrew Blog

Work SaaSでもっと価値あるシゴトを。Colorkrewオフィシャルブログ