gulpシリーズ1 〜導入の導入〜

gulp導入にあたってLIGさんの技術ブログ、
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ
が分かり易いので参考に進めていきます。

nodeのバージョンはv0.12.7を使用。

##準備

今回のテスト用ディレクトリ構成
gulp_dev

• develop/（開発環境）
  -- sass/
  --- index.scss
• httpdocs/（本番環境）
  -- css/
  --- index.css
  package.json
  gulpfile.js

該当ディレクトリに移動

cd gulp_test

package.jsonの作成

npm init

##Gulpのインストール
グローバルにgulpをインストールしていない場合は、下記コマンドにてインストール。

npm install gulp -g

ローカル（プロジェクト内）にgulpをインストール。

npm install gulp --save-dev

package.jsonに記載されたパッケージはnpm installとコマンドを打てば、一気にインストールされるらしい。これは便利。後ほど試してみよう。

##gulpfile.jsの作成
gulpfile.jsファイルを作成し、タスクを書き込んでいく。

作成場所
gulp_test/gulpfile.js

gulpの呼び出し

var gulp = require('gulp');

##タスクを使ってみよう
sassをコンパイルしてみる。

まずはscssファイルを作成。

css
h1{
  color: red;
  &:hover{
    color: blue;
  }
}

gulp-sassをインストール。

npm install gulp-sass --save-dev

gulpfile.jsにsassのタスクを追記

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

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

タスクを実行してみる。下記コマンドを実行。

gulp sass

destに指定した、sassの排出先のcssを確認してみる。
下記ファイルが作成されていることが確認できる。
gulp_dev/httpdocs/css/index.css

h1 {
  color: red; }
  h1:hover {
    color: blue; }

cssの記述は、大括弧が変な位置にいるが、後ほどcssbeautifyプラグインで綺麗にするとして、まずはsassタスクの実行には成功。

他のプラグインのインストールは次回以降に順次していく。

##package.jsonからプラグインをインストール
今回インストールしたプラグイン、gulp、gulp-sassがpackage.jsonに記述された状態で、別のディレクトリを作成してインストールしてみる。案件が変わった時に毎回package.jsonを作成するのは面倒なため、デフォルトのgulp環境を作っておくのが目的。

テストディレクトリ
gulp_copy/

今回作成したpackage.jsonをgulp_copy/にコピーし、npm installを実行。すると、node_modules/ディレクトリが作成される。この状態でgulp sassコマンドを実行するが、gulpfileがありませんと怒られた。

作成していたgulpfile.jsをgulp_copy/にコピーし、gulp sassコマンド実行。すると、gulp_copy/develop/sass/index.scssがコンパイルされ、gulp_copy/httpdocs/css/index.cssが作成されていることが確認できた。

要するに、別環境で今までのgulp環境を直ぐに作るために必要なファイルは2つのみ。

• gulfile.js
• package.json

そして、npm installコマンドを実行すれば、環境の出来上がり。

今回はここまで。