Toro_Unit

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

Written by

Toro_Unit

in

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

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

@import "object/component/*.scss";
@import "object/project/*.scss";
@import "object/utility/*.scss";

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

参考: sass-globbingでSassファイルをお手軽管理 – Qiita

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

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

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

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

mathisonian/gulp-sass-bulk-import

サンプルコード

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の設計がおかしいと思うので、メロン本とか読んでSMACSSなりFLOCSSなりITCSSなりやればいいんじゃないでしょうかね。

 

More posts