Grunt 和 sass 入门（部分）

Question

我刚刚开始使用 Grunt，对如何配置我的 gruntfile.js 以识别对 sass 部分文件的更改有点困惑。我已经关注了 Chris Coyier 在24ways.org 上的文章，并且对基础知识感到非常满意。运行 grunt watch 时，我可以对 style.scss 文件进行更改，grunt 将监视并编译更改。但是，我通常使用 style.scss 作为@imports 的长列表：

@import 'partials/partialfilename';

当我对我的任何部分进行更改时，grunt 不会注意到任何更改，因此不会编译任何内容。

在我的项目目录中，我有一个 sass 目录，其中包含一个 style.scss 文件和一个包含很多部分的部分目录。

这是我的 grunt 文件：

module.exports = function(grunt) {

// 1. All configuration goes here 
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {   
        dist: {
            src: [
                'js/custom.js', 
                'js/foundation.js',
                'js/jquery.listnav.js',
                'js/jquery.ioslider.min.js'
            ],
            dest: 'js/build-scripts.js',
        }
    },

    uglify: {
        build: {
            src: 'js/build-scripts.js',
            dest: 'js/build-scripts-min.js'
        }
    },

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/'
            }]
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.css': 'sass/style.scss'
            }
        } 
    }, 

    watch: {
        options: {
            livereload: true,
        },
        scripts: {
            files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        },
        css: {
            files: ['sass/**/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false,
            }
        },

        images: {
            files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
            tasks: ['imagemin'],
            options: {
              spawn: false,
            }
        }

    }



});

// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);

};

我已经为 watch css 参数尝试了几个不同的选项，例如：

css: {
  files: ['sass/**/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false
  }
}

和

css: {
  files: ['sass/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false
  }
}

我意识到我可能在这里“错过了重点”，我已经阅读了一些关于 grunt sass 插件“忽略”（_）由于 sass 通配规则（？）的下划线或部分，并且通过我的研究我有注意到大多数人在他们的项目中使用指南针，而我没有。

所以，我的问题又是：如何配置 grunt 以监视和编译对我的 sass 部分的更改并正确编译我的 css？

Answer 1

我找到了解决办法。

css: {
  files: ['sass/*.scss'],
  files: ['sass/partials/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}