javascript - 如何让 'grunt less' 自动运行 autoprefixer？

Question

我有一个带有 less 和 autoprefixer 的工作 Gruntfile。我也有 'grunt watch' 工作正常。

在我使用 autoprefixer 之前，我使用较少的 mixin 作为 vendor 前缀。运行 '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' 现在没有可用的输出。任务应始终产生可用的输出。
• 我不想告诉其他人“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
        }
      }
    },

  });


};

Answer 1

使用 autoprefixer 作为 LESS 的插件, 你必须安装 npm-package less-plugin-autoprefix:

npm install grunt-contrib-less less-plugin-autoprefix --save-dev

Gruntfile.js

module.exports = function(grunt) {
  "use strict";
  var gruntConfig = {
    less : {
      options : {
        plugins : [ new (require('less-plugin-autoprefix'))({browsers : [ "last 2 versions" ]}) ]
      },
      main : {
        files: {
          'src/css/desktop/bootstrap-theme.css' : 'src/less/desktop/bootstrap-theme.less',
          'src/css/desktop/company.css' : 'src/less/desktop/company.less',
          'src/css/desktop/index.css' : 'src/less/desktop/index.less',
          'src/css/desktop/login.css' : 'src/less/desktop/login.less'
        }
      }
    }
  };

  grunt.initConfig(gruntConfig);
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.registerTask('default', [ 'less' ]);
};