如何使用scss文件的多个子目录设置gruntjs指南针监视

时间:2014-02-20 18:01:03

标签: sass gruntjs compass-sass

是否有使用带有多个scss文件子目录的指南针的gruntjs配置?我的文件夹结构如下:

scss/
  ie.scss
  modules/
    _mixins.scss
    _settings.scss
  partials/
    _forms.scss
    _grid.scss
    _typeography.scss
    _utilities.scss
  print.scss
  screen.scss
  vendor/
    _font-awesome.min.scss
    _pure-buttons.scss
    _pure-forms.scss

如果我在scss目录上设置监视任务,它将监视该级别的三个文件。我想要一个类似于此项目在CodeKit中运行的设置,其中screens.scss正在导入的文件的任何更改都将触发刷新所有CSS代码。

因此,如果我在partials/_typeography.scss中更改了某些内容,我需要咕噜声来刷新screens.scss,其中包含该部分的@import语句。

1 个答案:

答案 0 :(得分:6)

检查一下。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
            clean: {
                options: {
                    clean: true
                }
            },
            dev: {
                options: {
                    sassDir: ['sass'],
                    cssDir: ['css'],
                    environment: 'development',
                    force: true
                }
            },
            prod: {
                options: {
                    sassDir: ['sass'],
                    cssDir: ['css'],
                    environment: 'production',
                    force: true
                }
            }
        },
        watch: {
            sass: {
                files: ['sass/**/*.scss'],
                tasks: ['compass:dev']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-compass');

    grunt.registerTask('build', ['compass:prod']);
    grunt.registerTask('default', ['watch']);
};