Question

（初级帖子）

我将Grunt用于this tree：

Gruntfile.js ：

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: {
                    'css/style.css': 'Component/**/*.scss',
                }
            }
        },
        watch: {
            css: {
                files: 'Component/**/*.scss',
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

它运行没有任何错误，但它不接受任何文件。 style.css仍为空。

当我替换此行时：

files: {
    'css/style.css': 'Component/**/*.scss',
}

with：

files: {
    'css/style.css': 'Component/header/header.scss',
}

它正确地获取了.css中的header/文件。

我对这两种语法都没有任何错误。

有什么想法吗？

Answer 1

您需要使用grunt文件模式在sources文件夹中递归获取所有文件：

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: [{
                    expand: true,
                    cwd: 'Component/',
                    src: ['**/*.scss'],
                    dest: 'css/',
                    ext: '.css'
               }]
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

要使用Grunt文件模式，您需要使用选项而不是'destination': 'source'形式的默认设置指定对象。文件模式对象具有以下选项：

{

    // source directory 
    cwd: String,

    // creates the subdirectories or flatten the content to the destination directory
    flatten: Boolean,

    // remove anything and after the file extension and replace with the ext String
    ext: String,

    // destination folder
    dest: String,

    // source file pattern using minimatch to match files
    src: String|Array

}

有关Grunt file patterns和minimatch文件匹配模式的更多信息。

编辑以获得所需的结果（将所有组件编译到单个文件中），您需要执行以下操作：

更改所有组件的文件名，例如将Component/header/header.scss更改为Component/header/_header.scss。带有_前缀的文件不会创建任何输出（Sass默认行为）。
然后创建一个引导程序文件（让我们调用style.scss，只包含您要合并到输出css文件中的文件的引用。对于每个文件，添加@import 'header/header'; header/_header.scss。您不需要添加扩展程序或_前缀。
将files任务的sass:dist定义更改为：{ 'css/style.css' : ['Component/style.scss'] }

Gruntfile.js现在看起来像这样：

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: { 'css/style.css' : ['Component/style.scss'] }
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

这会将Component/style.scss（包含对所有组件文件的引用）编译到css/style.css。

Grunt - scss未编译 - gruntFile.js

1 个答案: