6

我有一个带有较少和自动前缀的工作 Gruntfile。我也有'grunt watch'工作正常。

在我使用 autoprefixer 之前，我使用较少的 mixin 作为供应商前缀。运行 'grunt less' 将构建带有我所有前缀的工作 CSS。

现在我有了 autoprefixer，但是如果我想一次性构建我的样式，我现在必须运行 'grunt less' 然后 'grunt autoprefixer' 来获得带有前缀的 CSS。

我怎样才能修改'grunt less'以便它构建工作，再次减少前缀？

我已经阅读了文档，并且我知道我可以添加一个额外的任务来完成这两件事。然而：

  • 'grunt less' 现在没有可用的输出。任务应该总是产生可用的输出。
  • 我不想告诉其他人“少咕噜”不会产生可用的输出
  • 不需要额外的任务来替换不起作用的任务

即，我只想减少 grunt 来生成工作 CSS (with prefixes)。

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
        }
      }
    },

  });


};
4

2 回答 2

10

要使用 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' ]);
};
于 2015-02-24T06:29:45.103 回答
8

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 中注册了大量插件），这确实可以帮助项目的新手运行哪些任务。

于 2013-12-04T19:30:20.267 回答