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

#はじめに
前回は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デザイナー視点ではどっちもどっち。
開発メンバーが採用したほうでおこなう、が良し。