css - 当源文件夹有子文件夹时设置指南针目标文件夹

Question

我正在通过 grunt 使用 Compass 来编译 SASS 文件。我的目录结构如下所示:

project/
    Gruntfile.js
    package.json
    sass/
        part1/
            part1.sass
    css/

还有我的 Gruntfile.js:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
        std: {
            options: {
                sassDir: 'sass',
                cssDir: 'css',
                specify: 'sass/part1/part1.sass',
                raw: 'disable_warnings = true\n'
            }
        }
    }
});

当我运行我的 gruntfile 时，Compass 输出到 project/css/part1/part1.css，但我希望它输出到 project/css/part1.css反而。我怎样才能做到这一点？现在我正在使用 on_stylesheet_saved Hook 来移动文件，但它不是很优雅。

希望问题清楚，在此先感谢。

Answer 1

我重新创建了您的环境。我可以进一步简化 Gruntfile.js:

module.exports = function(grunt) {

    // Main project configuration
    grunt.initConfig({
        // Read NPM package information
        pkg: grunt.file.readJSON('package.json'),
        // Compass
        compass: {
            std: {
                options: {
                    cssDir: 'css',
                    sassDir: 'sass'
                }
            }
        }
    });

    // Load the grunt tasks
    grunt.loadNpmTasks('grunt-contrib-compass');

    // Compile production files
    grunt.registerTask('std', [
        'compass:std'
    ]);

    // Default task(s)
    grunt.registerTask('default', 'std');

};

您得到的是预期的罗盘行为。

略读 grunt-contrib-compass的自述文件，我明白了:

Compass operates on a folder level. Because of this you don't specify any src/dest, but instead define the sassDir and cssDir options.

这意味着您无法更改编译CSS 的路径，只能确定写入所有编译文件的根文件夹的路径。

虽然这可能很烦人，但 compass 只是假设保持编译符合目录结构应该是您愿意做的事情 - 这有点自以为是。

你仍然可以做你想做的，方法是:

1. 重组您的文件，使它们位于 compass 期望它们符合您的意图的位置。即删除 part1 目录并将 part1.sass 放在 sass 文件夹下。
2. 将您的 CSS 文件编译到一个临时文件夹，例如 tmp，使用另一个任务，例如 copy (grunt-contrib-copy) 来复制所有 >CSS 文件到 css 文件夹，然后使用类似 clean ( grunt-contrib-clean ) 的任务来清空 tmp 文件。您将按该顺序加载任务，以便它们以正确的顺序运行。