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