我如何在 grunt-contrib-sass 中编写一些任务？答案

【问题标题】：How I can write few tasks in grunt-contrib-sass?我如何在 grunt-contrib-sass 中编写一些任务？
【发布时间】：2015-07-28 16:58:43
【问题描述】：

我的 gruntfile.js 中有这样的内容：

        sass: {
            app: {
                files: {
                 '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                }
            },
            options: {
                style: 'nested'
            }
    },
grunt.registerTask('default', ['sass']);

但这只是一项任务。如何组合两个或多个任务？据我所知，在一些 grunt 模块中，您可以像这样组合多个任务：

            sass: {
              dev: {
                 app: {
                    files: {
                      '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                    }
                 },
                 options: {
                    style: 'nested'
                 }
              },

              production: {
                 app: {
                    files: {
                      '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                    }
                 },
                 options: {
                    style: 'compressed',
                    sourcemap: 'none'
                 }
              }
    },
    // and then register tasks
    grunt.registerTask('dev', ['sass:dev']);
    grunt.registerTask('prod', ['sass:production']);

但这不起作用，GruntJs 没有显示错误，也没有编译 sass。这有什么问题？

【问题讨论】：

你是如何运行它们的？只需将sass-task 注册为默认任务即可同时运行它们：grunt.registerTask('default', ['sass']) -> grunt
是这样，但我想彼此分开运行，比如grunt.registerTask('dev', ['sass:dev'])'或grunt.registerTask('production', ['sass:production']) '
然后您可以使用grunt dev 或grunt production。

标签： sass gruntjs grunt-contrib-sass

【解决方案1】：

有一个肮脏的黑客，但它至少对我有用。但起初我会建议迁移到 Gulp 那里，这样简单的任务就是小菜一碟。因此，您将在 initConfig 函数中为 sass 创建默认配置，然后我将使用回调函数注册任务，所有魔法都会发生。在那里您将覆盖默认设置，最后您可以运行 grunt sassTask 或任何名称。

grunt.registerTask("sassTask", function() {
    grunt.config.data.sass = {
        dist: {
            files: {
                'test.css': 'test.scss'
            }
        }
    };
    grunt.task.run('sass');
});

【讨论】：

这是一个很好的技巧，谢谢，会知道，但我发现更“清晰”的决定
恐怕没有其他解决方法了，你可以从githubgithub.com/sindresorhus/grunt-sass/blob/master/tasks/sass.js查看grunt-sass任务源，很清楚任务是如何工作的。
我阅读了有关此任务的所有信息，甚至查看了 gulp 是如何运行此任务的，但它确实非常简单。在下面的答案中，一切都很完美，如果你可以试试的话。

【解决方案2】：

我发现我的错误，它会以这种方式运行此任务：

sass: {
dev: {
    files: {
        '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
    },
    options: {
        style: 'nested'
    }
},
production: {
    files: {
        '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
    }
    options: {
        style: 'compressed',
        sourcemap: 'none'
    }
}
}
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('prod', ['sass:production']);

【讨论】：