Question

All .js and .less files are builded in my project with gruntjs (built-in .js support) and grunt-less-contrib plugin for tasks with .less files.

For a moment lesscss compresses css in one-definition-per-line style, for example for following .less file:

div,span,textarea,input {
  margin:0;
}

It will output:

div,
span,
textarea,
input {
  margin:0;
}

I want to compress all css into one line, for this example it should look like:

div,span,textarea,input{margin:0;}...other styles...

Is it possible? Any advice will be helpful, I am not sure that this is a question straight about lesscss or grunt.

Maybe it is possible to add a task after build.css is built, and then perform concatenation?

Answer 1

The grunt-contrib-less plugin is also enough to minify the compiled CSS. You don’t need another plugin to minify your code.

It has two options specific for this use-case:

• compress (will remove some whitespaces):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              compress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#compress

• yuicompress (will run your CSS through css-min internally):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              yuicompress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#yuicompress

So in your case “yuicompress” would be the right thing to add to your gruntfile.