0

我是 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 的方式并不重要，因为我真的很想知道如何实现这一目标。

4

1 回答 1

0

我不确定通过使用 Sass 和 Grunt-Contrib-Sass 来完全实现您想要实现的目标，但是您可以通过使用Sass-Globbing来实现类似的目标，这是一个允许您导入整个目录的 SASS 插件。要使用该插件，您可以使用requireGrunt-Contrib-Sass 中的选项，并且您可以让它针对一个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'
        }
    }
}
于 2015-04-26T22:15:27.777 回答