Ruby Compassが遅いのでGulp + LibSass + Compass環境を構築したら爆速になった

長い間、CSSを書く時はSCSS記法のSASSと、SASSのフレームワーク「Compass」を使ってきた。

しかしプロジェクトが大きくなっていくにつれて、SASSのコンパイル速度が遅くなってきた。

今ではコンパイルにかかる時間はおよそ5秒ほどかかっている。
これでは仕事にならない。

そこで何か対策はないかと調べたところ、どうやらSASSにもRuby製やLibSass、DartSassなど、色々と種類があるようで、これまで使ってきたRuby製は既にサポートが打ち切られているようだ。

今もっともメジャーなのが「LibSass」とのことなので、自環境でも使えるように環境構築をしてみた。

LibSassの使い方

LibSassは素のままでは、ファイルを監視して変更があったらコンパイルする、というようなことができないので、Gulpを介してLibSassを使うことにした。

npm i gulp-sass --save-dev

gulpfile.jsの設定

SCSSファイル監視用のタスクを書いてみた。

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require("gulp-plumber");
const autoprefixer = require('gulp-autoprefixer');

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

//Sass
task('sass', function() {
  return (
    src('./sass/style.scss')
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(autoprefixer({
      overrideBrowserslist: [
        'ie >= 11'
      ]
    }))
    .pipe(dest('./css/'))
  );
});

//watch
task('watch', (done) => {
  watch(['./sass/**/*.scss'], series('sass'));
  done();
});

gulpfile.jsを作成したら、タスクを実行してみよう。

gulp watch

監視状態に入り、SCSSファイルを保存すると自動的にコンパイルされるはずだ。

コンパイル速度も大幅に改善された。

Compassも合わせて使いたい場合

既存のファイルでCompassのライブラリを多用している場合など、Compass離れをすることで大幅なコード修正が入ることがある。

この場合、LibSassを使いながら、別の方法でCompassを利用することもできる。

まず、npmでCompassをインストールする。

npm i compass-mixins --save-dev

インストールが完了すると、node_modules/compass-mixinsというフォルダが作成される。

その中に「lib」というフォルダがあるので、これを作業ディレクトリへコピーする。

cp node_modules/compass-mixins/lib sass/lib

最後にSCSSファイル内のimport文のパスを修正する。

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

↓

@import "./lib/compass";
@import "./lib/compass/reset";

これで、Gulp + LibSass + Compassの環境が整った。

Gulpのタスクを実行すると、Ruby Compassでは5秒かかっていたコンパイルが1秒未満で完了した。