在我使用autoprefixer之前,我使用较少的mixins作为供应商前缀.运行’grunt less’将构建包含所有前缀的工作CSS.
现在我有autoprefixer,但是如果我想要一次性构建我的样式,我现在必须运行’grunt less’然后’grunt autoprefixer’来获得带有前缀的CSS.
如何修改’grunt less’以使其构建工作,前缀更少？
I’ve read the docs,and I know I could add an additional task to do both these things.但是：
>’grunt less’现在没有可用的输出.任务应始终生成可用的输出.
>我不想告诉其他人’少咕噜’不会产生可用的输出
>不需要额外的任务来替换不起作用的任务
即,我只想减少咕噜声来制作有效的CSS(带前缀).
module.exports = function(grunt) {
// Load Grunt tasks declared in the package.json file
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmtasks);
// Configure Grunt
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],yuicompress: false
},files: {
"./public/css/style.css": "./public/less/style.less"
}
}
},autoprefixer: {
development: {
browsers: ['last 2 version','ie 9'],expand: true,flatten: true,src: 'public/css/*.css',dest: 'public/css'
}
},watch: {
less: {
files: ["./public/less/*"],tasks: ["less","autoprefixer:development"],options: {
livereload: true
}
}
},});
};
解决方法
作为一个例子,你可以派grunt-contrib-less并添加代码来直接运行自动前缀到这里：https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L69 – 在这里注入这一行https://github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/autoprefixer.js#L56然后使用你的fork而不是官方插件.
最简单和最好的方法是注册一个新任务,完成这两个任务的工作但在一个命令中,即：
grunt.registerTask('buildless',['less','autoprefixer']);
我用自己的所有任务完成这项工作 – SASS编译,JS concat uglify,webfont生成等.只需告诉团队中的其他人运行这些任务,而不是自己咕噜咕噜或咕噜咕噜的autoprefixer.
更好的是,use my Grunt plugin available tasks.有了这个(以及过滤器配置),只要有人运行grunt可用任务,您就可以生成一个精简的任务列表,尽管我更喜欢将其替换为快速键入的任务.如果你像我一样并且被自动化错误所困扰(并且已经在Gruntfile中注册了大量的插件),这确实可以帮助新项目运行任务的项目.