6

I have a working Gruntfile with less and autoprefixer. I also have 'grunt watch' working fine.

Before I was using autoprefixer, I was using less mixins for vendor prefixes. Running 'grunt less' would build working CSS with all my prefixes.

Now I have autoprefixer, but if I want to do a once-off build of my styles, I now have to run 'grunt less' then 'grunt autoprefixer' to get working CSS with prefixes.

How can I modify 'grunt less' so it build working, prefixes less again?

I've read the docs, and I know I could add an additional task to do both these things. However:

  • 'grunt less' now doesn't have usable output. A task should always produce usable output.
  • I don't want to have to tell other people that 'grunt less' doesn't produce usable output
  • An additional task should not be required to replace one that doesn't work

I.e., I just want grunt less to produce 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
        }
      }
    },

  });


};

2 Answers 2

10

For using autoprefixer as 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' ]);
};
1
  • 2
    This works - however you will need grunt-contrib-less 1.0.0 or greater for LESS plugins. medium.com/@crisnoble/… is a good overview.
    – timbo
    Commented Feb 25, 2015 at 0:29
8

Grunt can't do what you describe in the question as tasks do not know about each other inherently. You have to glue tasks together using aliases, (easy) or functions (for when you want a bit more control), but there's no way of modifying the way one of these tasks behaves without changing the source.

As an example, you could fork grunt-contrib-less and add the code to run the auto prefixing directly into the task, around here: https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L69 - inject this line here https://github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/autoprefixer.js#L56 and then use your fork instead of the official plugin.

The easiest and best way is to register a new task that does the job of these two tasks but in the one command, i.e:

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

I do this with all my own tasks - SASS compilation, JS concat + uglify, webfont generation etc. Just tell the others in your team to run those tasks and not grunt less or grunt autoprefixer on their own.

Better still, use my Grunt plugin available tasks. With this (and the filter config) you will be able to produce a trimmed down list of tasks whenever someone runs grunt availabletasks although I prefer to alias this with tasks for quicker typing. If you're like me and have been bitten by the automation bug (and have registered loads of plugins in your Gruntfile), this can really help a newcomer to the project with which tasks should be run.

6
  • Thanks for your answer, but as mentioned in the question, I specifically do not want to add another task. Commented Dec 4, 2013 at 22:22
  • Grunt tasks do not know about other Grunt tasks, you would have to write a custom task function that could set attributes for both the less and autoprefixer tasks and then only have one configuration block (not recommended, would take at least few hours). The whole point of alias tasks is to solve this problem for you and it is the easiest and best way to do this. I'm not sure why you're so against this but it's just how Grunt works.
    – Ben
    Commented Dec 4, 2013 at 23:16
  • "I'm not sure why you're so against this" - the reasons I don't want another task are in bullet points in the question. Commented Dec 5, 2013 at 10:16
  • 2
    Then the only answer is to fork grunt-contrib-less and add the code to run the auto prefixing directly into the task, around here: github.com/gruntjs/grunt-contrib-less/blob/master/tasks/… - inject this line here github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/… and then use your fork instead of the official plugin. Or use Gulp which has a much easier configuration style than Grunt - github.com/wearefractal/gulp - but is out of the scope of this question.
    – Ben
    Commented Dec 5, 2013 at 12:27
  • 1
    OK, I've done that. I mentioned Gulp which is still in its early stages of development but the configuration is closer to what you mention: in Gulp you would only register a single task to do less, autoprefixing etc - no config, just code. However those plugins haven't been written yet so it's not a drop-in replacement just yet.
    – Ben
    Commented Dec 5, 2013 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.