uechi.io/_posts/2015-02-26-gulp-decomposer-bower-import.md

111 lines
3.6 KiB
Markdown
Raw Normal View History

2017-10-07 11:43:26 +09:00
---
title: 'gulp + decomposer: Best way to sassy-@import bower components'
date: 2015-02-26 00:00:00 Z
---
gulp + Browserify(+ debowerify)という構成でWebサイトを作っていると、SASSにもdebowerify相当のものが欲しくなってくる。
ちなみに、__debowerify__ というのは、
```js
var Velocity = require("velocity");
```
というJavaScriptを、
```js
var Velocity = require("./../../bower_components/velocity/velocity.js");
```
という風に、bower_components内のパスに解決してくれるBrowserify transformだ。
欲しいのはこれのSASS版。
「あったらいいのにな〜」と思うようなライブラリはGithubで検索すれば必ず出てくる。はずだったが、無かった。
そこで [decomposer](https://www.npmjs.com/package/decomposer) というgulpプラグインを作った。
# 使い方
まずは`npm install --save-dev gulp gulp-sass decomposer`で必要なものをインストールしておく。既存のプロジェクトに追加するならdecomposerだけでいい。
__gulpfile.js__ はこのように定義しておく。
```js
var gulp = require('gulp');
var sass = require('gulp-sass');
var decomposer = require('decomposer');
gulp.task('styles', function() {
gulp.src('src/styles/**/*.sass')
.pipe(decomposer())
.pipe(sass({indentedSyntax: true}))
.pipe(gulp.dest('dist/css'));
});
```
ポイントは`sass` __よりも前__`decomposer`を挟むこと。なぜなら、外部から@importしたmix-insや変数はSASSコンパイル時に解決されるからだ。`sass`よりも後に置くと、SASSが@importを解決出来ずにエラーが発生する
続けてSASSを書こう。
```scss
@import normalize.sass
@import styles/font
body
font-family: $ff-gothic
```
> `$ff-gothic`は [uetchy/styles](https://github.com/uetchy/styles) の _font.sass_ で定義されているfont-familyだ。
最後にBowerを使って必要なアセットをインストールする。
```bash
bower i --save normalize.sass
bower i --save uetchy/styles
```
これで完成。後は`gulp styles`を実行するだけだ。
# ファイルパス解決時のポイント
decomposer はBowerモジュールに入っている任意のファイルを指定して@importすることが出来る
記法はこのようになる。
```scss
@import [Bowerモジュール名]/[ファイル名]
```
例えば、よく使うスタイルをまとめた [uetchy/styles](https://github.com/uetchy/styles) の___font.sass__ を@importするなら
```scss
@import styles/font
```
と書ける。
ここでもし`@import styles`と、ファイル名を省略して書くとどうなるのだろうか? コンパイルに失敗する? そんなことはない。
モジュール名だけを書くと、decomposerは__bower.json__に書かれているmainファイルを見つけ出して、それを@importしてくれるのだ
もしmainファイルが複数指定されていたら、`index.sass``[モジュール名].sass`、または__mainっぽい名前__ を持つファイルを@importする
つまり、
```scss
@import normalize.sass
```
と書けば、
```scss
@import ../bower_components/normalize.sass/normalize.sass
```
という風に解決される。
# まとめ
これでスタイルの@importをすっきり書けるようになった
とはいえ、component対応やPlain CSSのインライン展開や.less対応など、追加したい機能は色々ある。
もしContributionに興味があるなら、[Githubリポジトリ](https://github.com/uetchy/decomposer)をフォークしてほしい。