javascript - 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/文件夹中的所有文件都应该编译成1个与javascript相同的大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 文件的顺序是无法控制的，并且它不会使 mixin 可用，即使它们首先被编译为 css - 这是没有意义的，因为它们丢失了它们的“mixin” ' 格式。最好在单个源文件上运行 sass 并在该源文件中导入其他文件。

更新

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

假设您有一个主 sass 文件，您可以使用另一种基于 concat 的方法。您需要向其中添加一个 @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 本身的情况下接近于自动加载。