gulpのsass,scssのコンパイルの高速化（LibSassをつかって)
これまではcompass+sassをgulpのタスクランナーで利用していてコンパイルが重くなってきたのでより高速で快適な環境にするため、良いという噂のLibsassを使った環境に変更してみました。
CompassをLibsassとAutoprefixerの環境に変更
基本的なコンパイルは Libsassを使えるgulpのライブラリ’gulp-sass’をつかいます。
またベンダープリフィックスの自動付与もgulpのライブラリ’gulp-autoprefixer’を使います。
合わせてインストール。
$ npm install gulp-sass --save-dev
$ npm install --save-dev gulp-autoprefixer
gulpfile.js
ディレクトリ構成は以下を想定
webroot/
css/コンパイルされたcss
scss/コンパイル前のcscc
gulpfile.js 最少構成
var gulp = require( 'gulp' ),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('scss',function(){
gulp.src('scss/**/*.scss')
.pipe(
sass({
outputStyle: 'compressed'
})
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['scss']);
});
ターミナルからgulpを実行してwatchして完了だいぶ高速になり、快適になりました。
$ gulp watch
[12:54:32] Using gulpfile your/project/path/gulpfile.js
[12:54:32] Starting 'watch'...
[12:54:32] Finished 'watch' after 11 ms
以下のようなスピード感。(msとか、μsとか1秒以内)
参考サイト
gulp-sass
gulp-autoprefixer
「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。
