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コマンドを実行すれば、環境の出来上がり。

今回はここまで。