gulp-sassで自動でSass/SCSSからcssファイルを生成する

フロントエンド開発に便利なNode.js環境で、ファイル変更時に自動でSass(SCSS)からCSSファイルを生成したい。

2016-06-17 追記

上位互換記事を書きました。

gulp-sassで自動でSass/SCSSからcssファイルを生成したり、他にもいろいろする - 人生リアルタイムアタック

準備

以下のようなディレクトリ構成を想定。

.
├── css
│   └── // cssファイルの生成先
└── assets
    └── sass
        └── main.scss

インストール

gulpとgulp-sassをインストールする

$ npm install gulp gulp-sass

gulpfile.jsの作成

まずは最も簡単な例として、*.scssに変更があれば自動で*.cssを生成する例。

var gulp = require('gulp');
var sass = require('gulp-sass');

// Sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('./assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css/'));
});

// watchタスク(**/*.scss変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./src/sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

// gulpのデフォルト動作としてsass-watchを実行
gulp.task('default', ['sass-watch']);

実行

$ gulp

を実行するだけで、後はSCSS変更時に自動でCSSが生成されるようになる。 **/*.scss としている場合、hoge/hoge.scss のcssの出力先も hoge/hoge.css としてくれる。親切。

出力フォーマットを変更したい。

gulpfile.js内の .pipe(sass()) を、 .pipe(sass({outputStyle: 'expanded'})) にすると、よくみるcssフォーマットで生成されるようになる。

構文ミス時にgulpごと落ちるのを何とかしたい

gulp-plumber を使う。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

// sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(plumber()) // ←ここが追加
    .pipe(sass())
    .pipe(gulp.dest('./css/'));
});

// watchタスク(Sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./src/sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

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

こうするとエラー時にも落ちない。

browser-syncと併用したい。

var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();

// browser-sync
gulp.task('bs', function(){
  var bsOptions = {}
  bsOptions.files = ['template/**/*.html', 'css/**/*.css'];
  bsOptions.port  = 3000;
  bs.init(bsOptions);
});


// sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css/'));
});

// watchタスク(Sassファイル変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./src/sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

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