Gruntで複数ディレクトリのSassを管理する

harada 349views 更新:2015年8月19日

1つのGruntfile.jsで複数の別ディレクトリのSassを管理したい場合のGruntfile記述メモです。
config.rbファイルはディレクトリ分必要です。

構成例

/gruntfile.js
/config.rb
/common/sass/*.scss
/common/css/*.css
/example/config.rb
/example/common/sass/*.scss
/example/common/css/*.css
module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: ['config.rb']
                }
            },
            plugin: {
                options: {
                    config: ['example/config.rb']
                }
            }
        },
        watch: {
            sass: {
                files: ['common/sass/*.scss', 'example/common/sass/*.scss'],
                tasks: ['compass']
            }
        }
    });
    var taskName;
    for (taskName in pkg.devDependencies) {
        if (taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }
    grunt.registerTask('default', ['watch']);
};

参考:
【Gruntの設定】Sassファイル複数対応、ブラウザの自動更新、これでコーディングがよりスムーズに!
Gruntでcompassを複数ディレクトリでそれぞれコンパイル

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません