如何使'grunt less'自動運行autoprefixer？

Question

我有一個工作Gruntfile少和autoprefixer。 我也有'咕嚕咕嚕'的工作正常。

在我使用autoprefixer之前，我使用較少的mixins作為供應商前綴。 運行'grunt less'將構建包含所有前綴的工作CSS。

現在我有autoprefixer，但是如果我想要一次性構建我的樣式，我現在必須運行'grunt less'然后'grunt autoprefixer'來獲得帶有前綴的CSS。

如何修改'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' ]);
};

Answer 2

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生成等。只需告訴團隊中的其他人運行這些任務，而不是自己grunt less或grunt autoprefixer 。

更好的是， 使用我的Grunt插件可用任務。 有了這個（以及過濾器配置），只要有人運行grunt availabletasks任務，您就可以生成一個精簡的任務列表，盡管我更喜歡將其替換為快速鍵入的tasks 。 如果你像我一樣並且被自動化錯誤所困擾（並且已經在Gruntfile中注冊了大量的插件），這確實可以幫助新項目運行任務的項目。