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

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