gulpでSass/Compass

gulpを使ってSass/Compassをはしらせたいと思います。

タスクの流れは、
scssファイルの監視 > cssファイル書き出し > ブラウザリロード

※ ライブリロードは、こちらのChromeエクステンションを使用しています。

使うプラグイン

• gulp-compass
• gulp-watch
• gulp-livereload

ディレクトリ構造

├── config.rb
├── css
│   └── style.css
├── gulpfile.js
├── package.json
└── scss
    └── style.scss

package.jsonの作成

package.json

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "gulp test",
  "main": "gulpfile.js",
  "author": "rayfields",
  "license": "MIT",
  "devDependencies": {
    "gulp": "~3.8.10",
    "gulp-compass": "~2.0.1",
    "gulp-watch": "~1.1.0",
    "gulp-livereload": "2.1.1"
  }
}

プラグインをインストール

$ sudo npm install

タスクの記述

gulpで実行したいタスクを記述します。
ファイル名はgulpfile.jsです。

gulpfile.js

'use strict';

var gulp        = require('gulp');
var compass     = require('gulp-compass');
var livereload  = require('gulp-livereload');

var SCSS_FILE   = './scss/**/*.scss';


/*
 * Compass
 */
gulp.task('compass',function(){
    gulp.src([SCSS_FILE])
        .pipe(compass({
            config_file : 'config.rb',
            comments : false,
            css : 'css/',
            sass: 'scss/'
        }))
        .pipe(livereload());
});


/*
 * Watch
 */
gulp.task('watch',function(){
    gulp.watch(SCSS_FILE, function(event){
        gulp.run('compass');
    });
});

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

gulpを実行！

$ gulp

# scssファイルを保存すると以下のようにログが表示されます

[15:56:01] Using gulpfile ~/***/gulpfile.js
[15:56:01] Starting 'watch'...
[15:56:01] Finished 'watch' after 8.83 ms
[15:56:01] Starting 'default'...
[15:56:01] Finished 'default' after 7.64 μs
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[15:56:30] Starting 'compass'...
[15:56:30] Finished 'compass' after 7.72 ms
    write css/style.css

[15:56:32] style.css was reloaded.
[15:56:32] Live reload server listening on: 35729