grunt sass 和 js 自动加载器

Question

我尝试了一些方法，但没有找到好的解决方案。 我正在使用 grunt 编译我的 sass 并缩小我的 javascript。

是否可以自动加载特定目录中的每个 .sass 文件和每个 .js 文件？

我试过这样的东西

sass: {
            options: {
                sourceMap: false
            },
            dist: {
                src: 'src/sass/**/*.sass',
                dest: 'dist/css/style.css'
            }
        }

但这只会加载第一个 sass 文件。 我不确定 concat 甚至可以做什么，但我也尝试过，但没有找到我想要的解决方案。

基本上sass/文件夹中的所有文件都应该编译成与javascript相同的1个大style.css文件。

当然我可以手动导入 main.sass 文件中的每个文件，但我会喜欢自动加载功能，这样我就不会偷懒，也不会创建新文件，因为我必须添加它们。

编辑：

所以有了这个

files: [{
                    expand: true,
                    cwd: "src/sass/",
                    src: ["**/*.sass"],
                    dest: "dest/css",
                    ext: ".css"
                }]

我实际上可以做我想做的事。问题是我的 mixin 加载得太晚了，它会抛出一个错误，因为它没有找到我想要包含的 mixin。

Answer 1

这是一种从多个源文件生成单个输出文件的格式：

concat: {
    whatever: {
        options: { separator: '\n' },
        src: ['src/sass/**/*.sass'],
        dest: 'build/tmp.sass'   // make sure the temporary build/ dir exists!
    }
}

它只适用于支持合并多个文件的任务；在这种情况下，grunt-contrib-concat 任务。 它产生dist/css/sass.tmp，您需要使用sass 任务来处理它：

sass: {
    dist: {
        files: [{        
            src: 'build/tmp.sass',
            dest: 'dist/css/style.css'
        }]
    }
}

您将确保它们按顺序运行，如下所示：

grunt.registerTask( 'default', ['concat', 'sass'] ); // add your uglify/cssmin here

但是，我不建议这样做，因为 sass 文件的顺序是不可控的，并且即使它们先编译为 css，它也不会使 mixin 可用 - 这是没有意义的，因为它们失去了它们的 'mixin ' 格式。最好在单个源文件上运行 sass 并在该源文件中导入其他文件。

更新

关于 mixin 文件的自动加载， SASS Reference 确实提到您可以使用处理 @import 的自定义导入器（用 Ruby 编写）；我不确定这是否仅适用于顶级文件导入，还是适用于规则内的@import mixin-name(foo)，但我不这么认为。

基于concat，假设您有一个主 sass 文件，您可以使用另一种方法。您需要向其中添加一个 @import 'all-mixins'。这个all-mixins.sass是一个生成的文件：

concat: {
    all_mixins: {
        options: { separator: '\n' },
        src: ['src/sass/mixins/*.sass'],
        dest: 'build/all-mixins.sass'
    }
}

您可以指定sass option loadPath 以将build/ 添加到路径中：

sass: {
    dist: {
        options: {
            loadPath: 'build/'
        },
        files: [{        
            src: 'build/tmp.sass',
            dest: 'dist/css/style.css'
        }]
    }
}

在不扩展 sass 本身的情况下，这与自动加载非常接近。