Question

我有一个工作的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
        }
      }
    },

  });


};

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然后使用你的分叉而不是官方插件。

最简单和最好的方法是注册一个新任务，完成这两项任务，但在一个命令中，即：

grunt.registerTask('buildless', ['less', 'autoprefixer']);

我使用自己的所有任务执行此操作 - SASS编译，JS concat + uglify，webfont生成等。只需告诉团队中的其他人执行这些任务，而不是grunt less或grunt autoprefixer自己的。

更好的是，use my Grunt plugin available tasks.使用此（和过滤器配置），只要有人运行grunt availabletasks，您就可以生成一个精简的任务列表，尽管我更喜欢用{{1}来对其进行别名为了更快地打字。如果你像我一样并且被自动化错误所困扰（并且已经在你的Gruntfile中注册了大量的插件），那么这对于应该运行任务的项目的新手来说真的很有帮助。

如何使'grunt less'自动运行autoprefixer？

2 个答案: