使用 Grunt.js 动态观察并随后将 SASS 文件目录编译为一个 CSS 文件答案

【问题标题】：Using Grunt.js to dynamically watch, and subsequently compile, a directory of SASS files into one CSS file使用 Grunt.js 动态观察并随后将 SASS 文件目录编译为一个 CSS 文件
【发布时间】：2015-04-26 19:34:40
【问题描述】：

我是 Grunt.js 的新手，但我已经开始掌握它的窍门了。然而，我想用它做的主要事情，我似乎无法确定。

我的目标是将 grunt 指向一个目录，让它监视所有匹配的文件，并在更改后将它们编译成一个新的单个 CSS 文件。

这是我当前的 gruntfile：

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        // CONFIG =========================/
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'assets/css/style.css' : 'assets/css/sass/*.scss'
                }
            }
        },
        watch: {
            css: {
                files: 'assets/css/sass/*.scss',
                tasks: ['sass']
            }
        }
    });
    // DEPENDENT PLUGINS =========================/
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // TASKS =====================================/
    grunt.registerTask('default', ['watch']);
};

到目前为止，我一直在使用 grunt-contrib-watch 和 grunt-contrib-sass。我已经尝试过指南针以及目录导入，但我无法让他们中的任何一个做我想做的事情。

归根结底，我真的只是想避免编写导入文件，因为源顺序对于我编写 SASS 的方式并不重要，而且因为我真的很喜欢知道如何做到这一点。

【问题讨论】：

标签： sass gruntjs grunt-contrib-watch grunt-contrib-sass

【解决方案1】：

我不确定仅通过使用 Sass 和 Grunt-Contrib-Sass 来实现您想要实现的目标，但您可以通过使用 Sass-Globbing（一个允许您导入的 SASS 插件）实现类似的目标整个目录。要使用该插件，您可以在 Grunt-Contrib-Sass 中使用 require 选项，并让它以一个主要的 styles.scss 文件为目标，该文件可能类似于：

@import "vendor/*";
@import "modules/*";
@import "partials/*";

然后你的 grunt 文件会是这样的：

sass: {
    dist: {
        options: {
            require: 'sass-globbing'
        },
        files: {
            'assets/css/style.css' : 'assets/css/sass/style.scss'
        }
    }
}

【讨论】：