How can I make grunt less run autoprefixer automatically?

Question

I have a working Gruntfile with less and autoprefixer. I also have a grunt watch that works great.

Before I used autoprefixer, I used fewer mixins for provider prefixes. Running "grunt less" will create working CSS with all my prefixes.

Now I have autoprefixer, but if I want to make a one-time assembly of my styles, now I need to run "grunt less" and then "grunt autoprefixer" to get working CSS with prefixes.

How can I change "grunt less" so that it does not work, and prefixes are less common?

I have read the docs and I know that I could add an extra task to complete these two actions . But:

• 'grunt less' now has no useful information. The challenge should always provide useful performance.
• I don’t want to tell other people that "grunt less" does not lead to a useful release
• No additional task required to replace one that does not work

Ie, I just want to grunt less to create working 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 } } }, }); }; 

Answer 1

Grunt cannot do what you describe in the question, because the tasks do not know about each other in essence. You have to glue tasks together using aliases (simple) or functions (if you need a little more control), but there is no way to change the way one of these tasks works without changing the source.

As an example, you can use fork grunt-contrib-less and add the code for automatic automatic prefix directly to the task: https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L69 - enter this line here https://github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/autoprefixer.js#L56 , and then use your plug instead of the official plugin.

The easiest and best way is to register a new task that performs the work of these two tasks, but in one team, i.e.

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

I do this with all my own tasks - compiling SASS, JS concat + uglify, creating webfont, etc. Just tell others in your team about these tasks, not grunt less or grunt autoprefixer yourself.

Better yet, use my available plugins for Grunt. With this (and the filter configuration) you can create an abbreviated list of tasks when someone runs grunt availabletasks , although I prefer an alias with tasks for faster input. If you are like me and have been bitten by an automation error (and have registered a lot of plugins in your Grunt file), this can really help newcomers to the project with whom the tasks should be performed.

Answer 2

To use autoprefixer as a plugin for LESS, you must install 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' ]); };