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 个大 style.css 文件，与 javascript.

相同

当然，我可以手动将每个文件导入到 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 并将其他文件导入该源文件。

更新

关于混合文件的自动加载， 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 本身的情况下最接近自动加载的结果。

grunt sass 和 js 自动加载器

grunt sass and js autoloader

javascript

css

sass

gruntjs