• Tips

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

    従来、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のバージョンも確認してみます。

    ...

  • Tips

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

    いまさら感が強いんですが、世の流れ的に、フロントエンド開発では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\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "maeno",
"license": "MIT"
}

Is this ok? (yes) yes

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

    ...