Edited at

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

More than 3 years have passed since last update.

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


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 などを用いて変更することができる。