我怎么能用grunt-contrib-sass写几个任务



我有一些这样的在我的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。这有什么不对吗?

有一个肮脏的hack,但它至少对我有效。但首先,我建议迁移到Gulp,因为它是一个简单的任务。你将在initConfig函数中为sass创建默认配置然后我将在回调函数中注册任务所有神奇的事情都会发生。在那里你将覆盖默认设置,最后你可以运行grunt sastask或任何名称。

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

我发现我的错误,它将以这样的方式运行这个任务:

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']);

相关内容

  • 没有找到相关文章