# gulp-sass-bulk-importを使ってSassの@importをすっきり管理する。

- リンク: https://torounit.com/blog/gulp-sass-bulk-import%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6sass%e3%81%aeimport%e3%82%92%e3%81%99%e3%81%a3%e3%81%8d%e3%82%8a%e7%ae%a1%e7%90%86%e3%81%99%e3%82%8b%e3%80%82/
- 公開日: 2015-08-10T10:00:33+09:00
- 作成者: Toro\_Unit

皆さんSass書いてますかー！gulpしてますかー！

唐突ですがRubyのgemにsass-globbingというものがありまして、そいつを使うと、

    ```decode:true
    @import "object/component/*.scss";
    @import "object/project/*.scss";
    @import "object/utility/*.scss";
    ```

みたいな感じで該当するファイルを勝手に読み込んでくれるという実に便利なgemです。Ruby
版のSassで使えます。

参考: [sass-globbingでSassファイルをお手軽管理 – Qiita](http://qiita.com/t32k/items/229745617da41f308f20)

ただ。。。。
 やっぱり速度面はnode-sassの方が良いし、WindowsでRubyどうするの？とか
聞かれるのがかったるいし、ruby-sassだとそれのバージョン管理もしないといけないし、
bundlerの使い方とか聞かれるのも面倒くさいです。gulp-ruby-sassもなんか書き方が特殊
だし。。。

package.json、composer.json、(たまにbower.json)、Gemfileを管理するのは地獄過ぎる
気がしたので、gulp-sassでやりきりたいなぁと思ってましたけど、それはそれで@import
地獄になります。PHPですらautoload出来るんだから何とかしてくれよと思うわけです。

別にrailsとか[middleman](https://middlemanapp.com/jp/)案件だったら良いんだろうけど、
あいにくこちらはレンタルサーバー案件メインのWordPressが得意な田舎のフロントエンド
エンジニアと来てます。

なので、gulp-sassでもsass-globbing的なコトが出来たら楽だなぁと思って探してたらありま
した。

[mathisonian/gulp-sass-bulk-import](https://github.com/mathisonian/gulp-sass-bulk-import)

### サンプルコード

    ```decode:true
    var gulp = require('gulp');
    var bulkSass = require('gulp-sass-bulk-import');
    var sass = require('gulp-sass');

    gulp.task('sass', function () {
        gulp.src('src/styles/**/*.scss')
            .pipe(bulkSass())
            .pipe(sass())
            .pipe(gulp.dest('dist/styles'));
    });
    ```

こんな感じで、gulp-sassの直前にpipeしてあげれば動きます。

とりあえず半月触ってますけど、とくにバグっぽいものには出会ってません。見つけたら
プルリクエスト投げましょう。

### 注意事項

基本的に名前順にファイルが読まれるので、ちゃんとモジュール化できてないCSSだと、読み込み
順の関係でおかしくなったりします。まぁそれは、CSSの設計がおかしいと思うので、[メロン本](http://www.amazon.co.jp/gp/product/4844336355/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4844336355&linkCode=as2&tag=torounit-22)
とか読んで[SMACSS](http://qiita.com/matsui-a/items/9b9188904d160a3ec223)なり[FLOCSS](https://github.com/hiloki/flocss)
なり[ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss)なりや
ればいいんじゃないでしょうかね。