Sass の build 時間 を 1/16 にした

tl;dr

背景

仕事で Ruby製の Compass を使って scss を css に変換していた。ただ、Ruby製の Compass は遅いとのことが以前から言われた。またすでにメンテナンスされていないため使うのをやめたいと思っていた。 置き換えるには LibSass が主流になっておりこちらに移行しようとした。

しかし、Compass には便利な機能で、ベンダープレフィックスやmixinがあり、単純に Compass を捨てて Libsass に移行ができなかった。

調査

移行事例の調査をした

スプライトをやめて、mixin をやめて Compass の依存を排除してから移行しているところや、compass-mixins を使用して compass の機能を残しながら Compass から LibSass へ移行している事例があった

対応

調査したもの踏まえて以下の対応をした

node-sass へ置き換え

Compass をやめて node-sass をインストール

@import “compass” を使えるようにする

compass-mixins をインストールして使う

gulpfile の見直し

@compass を使えるように先程インストールしたものを読み込む

gulp.task('css:tanspile', () => {
    return gulp.src('/path/to/src/**.scss')
        .pipe(sass({
            includePaths: ['./node_modules/compass-mixins/lib/'], 
            force: true,
            environment: 'production',
            outputStyle: 'compressed'
        }))
        .pipe(gulp.dest('/path/to/dest/'))
});

ファイルパスの見直し

手元の開発環境では、今まではファイルパスが　scss　のディレクトリのルートからのパスだったが、各　scss　ファイルからのパスになったので修正した

パフォーマンス計測

対応前はファイル数が増えるたびに遅くなりCPUパワーを使っていた。deploy 時間も短くなりリリースのときの時間が短くなったｌ

結論

#Sass #Compass #LibSass