javascript – 如何使’grunt less’自动运行autoprefixer？

我有一个工作Gruntfile少和autoprefixer.我也有’咕噜咕噜’的工作正常.

在我使用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无法完成您在问题中描述的内容,因为任务本身并不了解彼此.您必须使用别名,(简单)或函数(当您需要更多控制时)将任务粘合在一起,但是无法在不更改源的情况下修改其中一个任务的行为方式.

作为一个例子,你可以派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中注册了大量的插件),这确实可以帮助新项目运行任务的项目.

javascript – 如何使’grunt less’自动运行autoprefixer？

解决方法

相关推荐