我如何在 grunt-contrib-sass 中编写少量任务?
How I can write few tasks in 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 创建默认配置,然后我将使用回调函数注册任务,所有魔法都会在这里发生。在那里您将覆盖默认设置,最后您可以 运行 g运行t sassTask 或任何名称。
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']);
我的 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 创建默认配置,然后我将使用回调函数注册任务,所有魔法都会在这里发生。在那里您将覆盖默认设置,最后您可以 运行 g运行t sassTask 或任何名称。
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']);