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

2015年4月07日

maeno

従来、WEBフロントエンドの主要アセットであるCSSとJavaScriptはソースレベルでなかなか管理しづらく、すぐにカオスな領域に突入して保守しづらくなっていました。そのカオスな領域にあるCSSやJavaScriptをソースレベルでもっと保守管理しやすいように生み出されたのがGruntやGulpというコンパイルビルドの仕組みです。今の世の流れ的に、フロントエンド開発ではSCSS（SASS、LESS等）、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。実際にLESSで変数を使ったCSSスタイリングや、コード量が劇的に少ないCoffeeScriptでJavaScriptを書いてみると、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地になります。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境をサービス提供用のCentOSサーバに作ってみようかと思います（ローカル開発環境としてのWindowsマシンへの導入はこちらの記事を参照）。

ちなみに、Gulpは「ガルプ」と読みます。私は最初「グループ」とか読んでました…（笑）

Node.js のインストール

まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールするのですが、まずはnode.jsやライブラリのバージョン管理モジュールであるnvmからインストールしていきます。下記のように、nvmをGitHubからクローンして同梱のシェルでインストールします。

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh

次に、node.jsをインストールするのですが、その前に現在のnode.jsの安定バージョンを Node.jsの公式サイトを確認しましょう。TOPページの真ん中あたりに「Current Version: v0.12.2」というように記載されているので、そのバージョンをインストールするのが無難です（2015年4月7日時点のNode.jsの安定バージョンは0.12.2でした）。インストールバージョンが決定したら、nvmでインストールします。

$ nvm install v0.12.2
$ node -v
v0.12.2

バージョン確認してインストールバージョンが表示されればOKです。最後に、自分のコンソール環境でnode.jsが利用できるように .bashrc に以下の記述を追記しておきます。

$ vim .bashrc
$ cat .bashrc
# .bashrc

# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

# User specific aliases and functions

. ~/.nvm/nvm.sh
nvm use v0.12.2
export NODE_PATH=${NVM_PATH}_modules

ついでにバンドルでインストールされたnpmのバージョンも確認してみます。

$ npm -v
2.7.4

これでNode.jsのインストールは完了です。

Gulp のインストール

次にGulpをグローバルにインストールします。

$ npm install -g gulp
$ glup -v
[**:**:**] CLI version 3.8.11

これでインストール完了です。簡単ですね。

次に、ローカルにインストールします。ローカルにインストールするにあたっては、npmの初期化を行う必要があります。まず任意にgulpを実行したいディレクトリを作成します。この記事では自分のホームディレクトリ内に、 ~/gulp_build というディレクトリを新たに作成しています。

$ mkdir -p gulp_build
$ cd gulp_build
$ 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 <pkg> --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_build) 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 /home/maenok/gulp_build/package.json:

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


Is this ok? (yes) yes

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

$ npm install gulp --save-dev gulp gulp-util
$ 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 | vi sass/style.scss
$ cat sass/style.scss
a {
    color: #88f;
    &:hover {
        text-decoration: none;
    }
}

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

$ vi ~/gulp_build/gulpfile.js
$ cat ~/gulp_build/gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');

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

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

$ gulp sass
[**:**:**] Using gulpfile ~/gulp_build/gulpfile.js
[**:**:**] Starting 'sass'...
[**:**:**] Finished 'sass' after 19 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 | vi less/style.less
$ cat less/style.less
@link-color: #88f;

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

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

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

$ vi ~/gulp_build/gulpfile.js
$ cat ~/gulp_build/gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
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 ~/gulp_build/gulpfile.js
[**:**:**] Starting 'less'...
[**:**:**] Finished 'less' after 21 ms

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

$ cat css/style.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 | vi coffee/script.coffee
$ cat coffee/script.coffee
Home = ->
  $('.button').on 'click', (e) ->
    e.preventDefault()
    if window.confirm "Are you sure?"
      $(@).trigger 'click'
    else
      return false

$(document).ready(Home)

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

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

var gulp = require('gulp');
var gutil = require('gulp-util');
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 ~/gulp_build/gulpfile.js
[**:**:**] Starting 'coffee'...
[**:**:**] Finished 'coffee' after 26 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プラグインにはデフォルトで定義しておくべき有効なもの（ベンダープリフィックス自動付与やミニファイなど）が他にも結構あるので、その辺は利用シーンに合わせて探してみると良いでしょう。

これで、CSSやJavaScriptもGitHubなどでソースの管理および開発を行いつつ、CentOSサーバなどのサービス環境側ではソースをプリコンパイルしてデプロイするという、今どきのWebサービス環境が整いました。

Colorkrew Blog

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