[gulp] 自動で main-bower-files から Sass ファイルをインポートする

bower で管理する Sass ファイルを手動でインポートするのはパッケージが増えてくると面倒なので自動化する。

• https://github.com/gulpjs/gulp
• https://github.com/dlmanning/gulp-sass
• https://github.com/ck86/main-bower-files
• https://github.com/klei/gulp-inject

gulpfile.js

gulpfile.js

"use strict";

var gulp = require("gulp"),
    mainBowerFiles = require("main-bower-files");

var $ = require("gulp-load-plugins")();

// inject Scss files in bower components to vendor.scss
gulp.task("inject-bower-scss", function () {
    return gulp.src("app/styles/vendor.scss")
        .pipe(
            $.inject(
                gulp.src(mainBowerFiles({filter: "**/*.scss"}), {base: "bower_components", read: false}),
                {
                    starttag: "// inject:{{ext}}",
                    endtag: "// endinject",
                    transform: function (filepath) {
                        return '@import "' + filepath + '";';
                    },
                    relative: true
                }
            )
        )
        .pipe(gulp.dest("app/styles"));
});

// Compile Sass to CSS
gulp.task("sass", ["inject-bower-scss"], function () {
    return gulp.src("app/styles/**/*.scss")
        .pipe($.sass())
        .pipe(gulp.dest("dist/styles"))
});

main-bower-files は利用している bower パッケージのメインパッケージを列挙してくれるので、filter オプションで Scss をフィルタしている。vendor.scss への挿入は gulp-inject を使っているが標準で Sass には対応していないのでオプションで Sass に対応させている。

app/styles/vendor.scss

app/styles/vendor.scss

// Override variables
$gray-base: #fff !default;

// inject:scss
@import "../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endinject

// inject:scss から // endinject の間にインポート文が挿入される。この前に変数を定義しておくことでその変数を上書きできる。

インポートされる順序を強制したいときは、gulp-order などを用いて変更することができる。