はじめに

前回はGruntで環境を作ったが今回はGulpで。

なぜGulpなのか

Gruntと並んで使用されているため比較としてやってみる。

目的

WEBデザイナーがhtml、cssコーディング作業をするときに少しでも無駄を減らしたい
WEBデザイナーが感じる「環境をつくるということの心の壁」を乗り越えたい
なんか新しいことやってみたい

すること

タスクスタート時ブラウザ自動オープン
ファイル更新時ブラウザ自動更新
sassからcssへの自動コンパイル
ローカルでHTTPサーバー起動

Nord.jsインストール

Nord.jsの確認

インストールできたかバージョンチェックで確認

$ node -v

Sassインストール

$ gem install sass

Compassインストール

$ gem install compass

作業フォルダをつくる

こちらが今回の最終的な構造

project
    ├index.html
    ├stylesheet
    │  └style.css            
    ├sass
    │  └style.scss              
    ├node_modules
    │└gulp
    │└gulp-compass
    │└gulp-webserver
    │└gulp-plumber
    ├config.rb
    ├package.json
    └Gulpfile.js

以下をまず作っておく。ほかは自動で作られる。

project
    └index.html

以下からprojectディレクトリで作業する

Gulpインストール

$ npm install gulp --save-dev

package.jsonをつくる

$ npm init
いろいろ聞かれるがEnter連打でOK

npmパッケージインストール

Compassタスク
$ npm install gulp-compass --save-dev

HTTPサーバー起動タスク
$ npm install gulp-webserver --save-dev

エラー時監視続行タスク
$ npm install gulp-plumber --save-dev
※sassのコンパイル中にシンタックスエラー時に監視が止まってしまうのを防止するため導入。こちらはなくても良い。

Compass実行

$ compass create

エラー出たら

$ rbenv rehash

Gulpfile.jsの作成

こちらは手作業。。

Gulpfile.js

var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var webserver = require('gulp-webserver');

// webserver
gulp.task('webserver', function () {
    gulp.src('.') 
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true
        }));
});

// compass
gulp.task('compass', function(){
    gulp.src('sass/**/*.scss')
    .pipe(plumber())
    .pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'stylesheets/',
        sass: 'sass/'
    }));
});

//watch
gulp.task('watch', function(){
  gulp.watch('sass/*.scss',['compass']);
});

gulp.task('default', ['watch' ,'webserver']);

Gulp 実行

$ gulp

確認

こちらへアクセス
http://localhost:8000/

Done!!

まとめ感想

Gruntと比較して
・ファイルが少ない
・jsのコード書くの少ない
と思ったのは最初だけで、Gruntと特に変わらず。
おそらく便利なプラグインの多さなどで決まるだろうが、、WEBデザイナー視点ではどっちもどっち。
開発メンバーが採用したほうでおこなう、が良し。

次はWEBデザイナーがGulp+Compass+Sassでコーディング作業効率の良い環境を作ってみた[Mac]