Gulp で sass / scss ファイルを自動でインポートする #Sass

gulp-inject は JavaScript ファイルや CSS ファイルなどのターゲットファイルを Html ファイルなどのソースファイルに自動的に挿入することができる Gulp プラグインです。

v2.2.0 に Sass 対応のプルリクエストが取り込まれたため、sass, scss ファイルに対して sass, scss, css ファイルを自動的にインポートすることができるようになりました。

Sass ファイルを自動でインポートする

分割された Sass ファイルのインポートは新しくファイルが作成されたときとファイルを削除したときにわざわざ手動で作業する必要があり面倒です。

main.scss

@import "./TodoList.scss";
@import "./TodoItem.scss";
// etc...

Sass に対応した gulp-inject で分割された Sass ファイルを自動的にインポートすることができます。

styles/main.scss

/* inject:scss */
/* endinject */

body {
  ....
}

gulpfile.js

var gulp = require("gulp"),
    inject = require("gulp-inject"),
    sass = require("gulp-sass");

gulp.task("styles", function () {
    // styles/main.scss に対して挿入する
    return gulp.src(["styles/main.scss"])
        // styles/main.scss を除く styles/**/*.scss をターゲットファイルとする
        .pipe(inject(gulp.src(["styles/**/*.scss", "!styles/main.scss"]), {relative: true}))
        .pipe(sass())
        .pipe(gulp.dest("dist/styles"));
});

gulp-inject ではソースファイルが sass, scss ファイルの場合、自動的に @import "<target file path>"; の形で挿入されます。

/* inject:scss */
@import "./TodoList.scss";
@import "./TodoItem.scss";
/* endinject */

body {
  ....
}

これでファイルが増えたり、減ったりしても自動的にインポートされた結果で Sass ビルドが実行できます。

bower パッケージに含まれる Sass ファイルを自動でインポートする

応用例として main-bower-files と組み合わせることで bower パッケージに含まれる Sass ファイルも自動的にインポートすることが可能です。main-bower-files は bower パッケージの main に設定されているファイル一覧を取得することができるライブラリです。

bower.json

{
    "name": "example-app",
    "dependencies": {
        "open-sans-fontface": "~1.4.2"
    },
    "overrides": {
        "open-sans-fontface": {
            "main": [
                "open-sans.scss",
                "fonts/**/*"
            ]
        }
    }
}

styles/vendor.scss

$OpenSansPath: "../bower_components/open-sans-fontface/fonts";
/* inject:scss */
/* endinject */

gulpfile.js

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

gulp.task("styles", function () {
    // styles/vendor.scss に対して挿入する
    return gulp.src(["styles/vendor.scss"])
        // bower パッケージのメインに指定されているファイルをターゲットファイルとする
        .pipe(inject(gulp.src(mainBowerFiles()), {relative: true}))
        .pipe(sass())
        .pipe(gulp.dest("dist/styles"));
});

この例では open-sans-fontface を利用しています。このパッケージは main に CSS が指定されていますが、ここではフォントの読み込みパスを変更したいため、bower.json に main を上書きするように設定しています。こうすることで mainBowerFiles() には、open-sans.scss が含まれるようになり、vendor.scss にインポートされるようになります。

$OpenSansPath: "../bower_components/open-sans-fontface/fonts";
/* inject:scss */
@import "../bower_components/open-sans-fontface/open-sans.scss";
/* endinject */

その他にも TW Bootstrap の設定を変更したい場合など、bootstrap-sass を利用してアイコンフォントの読み込みパスを変更したり、各種設定を変更することが可能です。

さいごに

gulp-inject はさまざまなファイルに対して適切な構文でファイル読み込みを挿入することができます。v2.2.0 からは Sass ファイルに対して挿入することができるようになりました。

gulp-inject は Sass 以外にも Less などさまざまなファイルに対応しています。ぜひ試してみてください。