Grunt和Sass（部分）入门

Question

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

@import 'partials/partialfilename';

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

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

这是我的咕unt声文件：

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
  }
}

我意识到我可能在这里“遗漏了一点”，我已经读过一些有关粗俗的sass插件的信息，因为sass乱码（？），它忽略了（_）下划线或部分，而且通过研究，我注意到大多数人们在他们的项目中使用指南针，而我不是。

因此，我的问题再次是：如何配置grunt来监视和编译对sass部分的更改并正确地编译css？

Answer 1

我找到了解决方案。

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