フロントエンド開発に便利な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']);
こんな感じかなー
