当源文件夹有子文件夹时设置指南针目标文件夹答案

【问题标题】：Setting Compass destination folder when source folder has subfolders当源文件夹有子文件夹时设置指南针目标文件夹
【发布时间】：2014-05-09 12:02:34
【问题描述】：

我通过 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 挂钩来移动文件，但它不是很优雅。

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

【问题讨论】：

如果没有Gruntfile.js，就无法真正知道是什么导致了错误，但是这样的行为只能由错误的配置引起。把它贴在这里，我会看看它。 :)（-1 不是我的，顺便说一句）...
@WallaceSidhrée 我将问题编辑得更清楚，并包含一个具体的最小示例。非常感谢您提供的任何帮助！
刚刚使问题的标题与您要解决的问题更相关；)

标签： css sass gruntjs grunt-contrib-compass

【解决方案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 在文件夹级别上运行。因此，您无需指定任何 src/dest，而是定义 sassDir 和 cssDir 选项。

这意味着你不能改变你的CSS被编译到的路径，只能确定所有编译文件写入的根文件夹的路径。

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

你仍然可以做你想做的事，通过：

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

【讨论】：