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"
                }]

我实际上可以做我想做的事。问题是我的mixins加载得太晚了，因为它没有找到我想要包含的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本身。

grunt sass和js autoloader

1 个答案: