高速化施策の自動処理について

fem.2.doc

高速化施策の自動処理
=================

- Compassはもう要らない、ついでにlibsassを入れてgem依存から脱却しよう
- CSSスプライトはSpritesmithに任せよう
- ベンダープレフィックスはautoprefixerに任せよう
- コンパイル、結合、圧縮、そんな機械的な作業はGruntに任せよう

## Compassはもう要らない、ついでにlibsassを入れてgem依存から脱却しよう

### 参考資料

Goodbye Compass
http://bensmithett.com/goodbye-compass/

Good-bye Compass, Good-bye Ruby.
http://t32k.me/mol/log/good-bye-compass-good-bye-ruby/

libsass and SassC
http://wozozo.hatenablog.com/entry/2013/06/13/025602

Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass
http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

LibSass
http://libsass.org/

Sass
http://sass-lang.com/

CSS Preprocessor Benchmark
http://www.solitr.com/blog/2014/01/css-preprocessor-benchmark/

### どうするべきか

`gem`依存はイヤだ！`npm`に統一したいんだ！
という場合は`compass`と`sass`にお別れを告げます。

別に`gem`依存があってもいいんじゃね、`middleman`と共存する道もあるんじゃね？
という場合はそのままにしましょう。

`compass`? `sass`? なにそれ美味しいの? という場合は回線切って(ry

```
gem uninstall compass
gem uninstall sass
```

どの選択肢を選ぼうと、本題である`libsass`を導入します。

素の`libsass`は少しハードルが高いので`Node.js`で扱える`node-sass`を導入します。

`Node.js`? なにそれ美味しいの? という場合は回線切って(ry

```
npm install node-sass
```

これでSassよりも高速なlibsassを使用出来る環境が構築されました。

しかし、`node-sass`のままでは、`Grunt`や`gulp`といったタスクランナーに繋げられません。

後続に`Grunt`の話が控えている前提で`grunt-sass`を導入します。

`grunt-sass`は`node-sass`を`Grunt`で扱えるようにしたものです。

```
npm install grunt-sass
```

実運用では`package.json`をもとに`npm install`することがほとんどだと思います。


## CSSスプライトはSpritesmithに任せよう

CSSスプライトを作るツールとしての`Fireworks`はもはやオワコンです。

`Spritesmith`を始めとしたCSSスプライトを生成するツールを使用することで、手間なくスプライト画像とCSSを生成することが出来ます。

spritesmith
https://github.com/Ensighten/spritesmith

grunt-spritesmith
https://github.com/Ensighten/grunt-spritesmith

gulp.spritesmith
https://github.com/twolfson/gulp.spritesmith

ちなみに`gulp`バージョンの`Spritesmith`はオリジナルの作者ではない方が`gulp-spritesmith`を作ってしまった結果、オリジナルで`gulp-*`を使えなくなるという事態が発生しています。

そして`gulp-spritesmith`はブラックリスト入りしました。
https://github.com/gulpjs/plugins/blob/master/src/blackList.json

## ベンダープレフィックスはautoprefixerに任せよう

`Compass`にお別れを告げたことでベンダープレフィックスを自分で指定する必要が発生しました。

しかし`autoprefixer`を使用することで最適なベンダープレフィックスが自動的に付与されます。

例によって`Grunt`の使用を前提とします。

```
npm install grunt-autoprefixer
```

## コンパイル、結合、圧縮、そんな機械的な作業はGruntに任せよう

「高速化」とは表示速度だけではなく、工数の圧縮も含んでいると認識しています。

いくら精緻にパフォーマンスを追求したとしても、それが工数の増大に繋がり、予算を超えてしまっては意味がありません。

良い意味で手を抜く為、クリエイティビティではない機械的な作業はタスクランナーに任せましょう。