このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.06.11

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

スクリーンショット 2016-06-11 11.23.56

「今は昔」

この業界は本当にサイクルが早い。

あんなに、「おお。なんだこれ、超便利ではないですか?」と言っていたものもすぐに「古く」なってしまう。

「compass」もその一つではないでしょうか。

いや、全然便利で使いたいのですが、何しろ

「コンパイルがクソ遅い。」

compassはご存知の通り、「Ruby」で作られています。

が故に、ちょっとSCSSの編集したいだけなのに、コンパイルにとても時間がかかってしまいます。orz

と、言う訳で「compass」はもう卒業しました。

卒業するのはいいのですが、代替えは何を利用するかと言いますと、「Libsass」ですね。

Libsass

スクリーンショット 2016-06-11 17.32.29

「Libsass」とはなんぞや。て方に。

C/C++で書かれたSass Compilerとなります。

当たり前で恐縮なのですが、C/C++で書かれているのでコンパイルの速度は、ビックリするぐらい「爆速」です!

Github

https://github.com/sass/libsass

公式ページ

http://sass-lang.com/libsass

まぁ、コンパイル時間を比較してもらえると。

compass

'compass' after11 s
Finished 'compass' after14 s
Finished 'compass' after13 s
'build.css' after11 s

libsass

'sass' after21 ms
'sass' after15 ms
'sass' after14 ms

なんだ、そんなに変わっていないではないか? と勘違いされた方もいたりするのではないでしょうか?

そんな方はよく見ていただけると w

「compass」のコンパイルは 10s、つまり10秒以上かかっているのですが、

「libsass」のコンパイルは 14ms〜21ms、単位が違います w

単位はmsで 1/1000秒となっております。秒に戻すと 0.014秒〜0.021秒となります。

その速度は、「compass」の約1000倍!! それは 爆速でしょう!!

では早速使ってみましょう!

git

git clone git@github.com:sass/libsass.git
git clone git@github.com:sass/sassc.git
export SASS_LIBSASS_PATH=/Users/hcatlin/path/libsass
./bin/sassc [input file] > output.css

と、sasscも、gitcloneしてきて使用するのですが、そのままだと使用するのに面倒です。

幸いにも色々な言語でWrapされていますので、今回はnodeで利用できるように「node-sass」を利用します。

スクリーンショット 2016-06-11 17.41.08

node-sass

node-sassは「libsass」をnodeで使用できるようにラップされたライブラリとなります。

スクリーンショット 2016-06-11 17.47.43

github

https://github.com/sass/node-sass

npm

https://www.npmjs.com/package/node-sass

npmコマンドでインストール可能です。

npm install node-sass
var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

と、すぐに利用できるのですが、さすがに毎回コンパイルの時にコマンドを叩く様なことはしないかと思います。

大体、ファイルをwatchして自動でコンパイルできる様にしているかと思います。

こういったタスクを自動化できるのがタスクランナーの役目ですが、そのタスクランナーの「gulp」でもすぐに「node-sass」を利用できる様にラップされた「gulp-sass」がありますので、そちらを使っていきます。(更にラップw)

gulp-sass

当方も、タスクランナーは「gulp」を利用していますので、基本こちらを使っています。

github

https://github.com/dlmanning/gulp-sass

npm

https://www.npmjs.com/package/gulp-sass

インストール

npm install gulp-sass --save-dev

基本使用

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

compassをタスクに加えていた場合でも簡単に置き換えれるので非常に便利です。

と、いう訳で、コンパイルは爆速になったのですが、「compass」で便利な機能の一つである「ベンダープリフィックスの付与」が対応できないので

「gulp-autoprefixer」で対応します。

(「gulp-pleeease」と手がありますが今回はパス。)

gulp-autoprefixer

gulp-autoprefixerは、ベンダープレフィックスを自動で付与してくれるライブラリです。

github
https://github.com/sindresorhus/gulp-autoprefixer

npm

https://www.npmjs.com/package/gulp-autoprefixer

インストール

npm install --save-dev gulp-autoprefixer

使用方法

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('default', function () {
  return gulp.src('src/app.css')
    .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(gulp.dest('dist'));
});

と、簡単に導入できます。

(使用方法の詳細は今回は割愛させていただきます mm)

autoprefixerは基本、Can I use をもとにベンダープレフィックスの有無を調べて付与していますが、オプションでブラウザやバージョンを指定することができます。

要件によっては「ベンダープレフィックス」が必要なかったり、必要だったりとするかもしれませんが、付与の有無を容易に変更することができ、柔軟性も高いのが特徴ですね。

まとめ

と言う事で、「compass」をやめた事で無駄なストレスもなくなり仕事も捗りました。

と、ここまで書いてきたのですが、実は「compass」もコアを「libsass」に置き換える予定なので利用されている方は無理に変更されず、待っていても

良いかもしれません w (ここまで書いておいて。)

その他にも、「静的サイトジェネレーター」をgo言語に置き換えたりする事によって、更なる「爆速環境」の元、作業を行えていたりするので、その事に関して次回機会があれば書かせていただこうかと思います。

動的言語でのコンパイルにもう限界!といった方には、静的言語で作成されたコンパイラーの使用を是非オススメしたいです!

ではではー。またまたー。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。