gulpを動かしてゴリゴリSCSSを書いています。

当社はPHPを主に扱っているので、PHPが動く環境でかつSCSSが書けてbrowsersyncが効く状態が一番ストレスなく開発が進められます。

そんなストレスフリーな環境を実現するには、gulpfile.jsのbrowsersyncの設定をproxyにすれば可能です。

gulp.task("default-toEccube", function() {
    browser({
        proxy: "xxx.xxx.xxx/project/"
    });
    gulp.watch("scss/**/*.scss",["sass"]);
});

ストレスフリーにらくらく開発を進めていた所、SCSSコンパイルに何秒もかかっている事に気づきました。

よくよくgulpfilesのSCSSコンパイルの所を見直してみると、compassがかなり時間をかける原因になっていたようでした。

gulp.task("sass", function() {
    gulp.src("scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>") 
        }))
        .pipe(sourcemaps.init())
        //.pipe(sass())
         .pipe(compass({
             config_file: './config.rb',
             css: css_path,
             sass: 'scss'
         }))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write(css_path))
        .pipe(gulp.dest(css_path))
        .pipe(browser.reload({stream:true}));
});

このcompassはrubyで動かしていて、これがボトルネックの原因でした。

速くしたいならlibsassを使うような流れになってきているそうで、これまた導入しようと調べた所、実はコメントアウトしていた .pipe(sass()) がそのlibsassという事を知って二度驚きました…。

gulp.task("sass", function() {
    gulp.src("scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>") 
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write(css_path))
        .pipe(gulp.dest(css_path))
        .pipe(browser.reload({stream:true}));
});

すぐさま、compassを消去し、sassを復活させましたが、今度は自分が良く使うベースのscssファイル群にcompassの関数が使われているのがあって、コンパイルが通らなくなりました。

そこでcompassの関数をsassのみで使えるように開発された、compass-mixinsを導入してみました。

使用方法は、使いたいプロジェクトファイルのscssフォルダにダウンロードしたcompass-mixinsのcompassフォルダを入れて、インポートしたいscssファイル（例えば、styles.scss）の上の方に、

@import "compass/reset";
@import "compass";

で呼び出すだけで、エラーがなくなりcompassの関数が使えちゃいました！！

そして、コンパイルの速度は6秒から1秒未満に！ctrl-s押したらすぐ完了！みたいなレベルになりました。

スプライトなどをcompassで使っていた場合別の方法を取らないといけないですがそこまで使っていなかった方にはオススメです。