Is it possible to place all css in one line using gruntjs and/or lesscss?

Question

Is it possible to place all css in one line using gruntjs and/or lesscss?

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?

node.js
less
gruntjs

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.

Answer 2

You can minify your CSS files with grunt.js using the module grunt-css

Install the module with npm install grunt-css --save-dev
Load the module in your grunt.js or Gruntfile.js (depending on the grunt version used) using grunt.loadNpmTasks('grunt-css');

configure the task in the Gruntfile.js as,

grunt.initConfig({
  less: {
    //YOUR LESS CONFIG
  },
  cssmin: {
    YOUR_TARGET: {
      src: 'SRC_PATH/input.css',
      dest: 'DEST_PATH/output.min.css'
    }
  }
});

you can combine and minify multiple css files using the following configuration,

grunt.initConfig({
  less: {
    //YOUR LESS CONFIG
  },
  cssmin: {
    YOUR_TARGET: {
      src: 'SRC_PATH/**/*.css',
      dest: 'DEST_PATH/output.min.css'
    }
  }
});

Register your task with grunt build task, to run after the less task,
```
grunt.registerTask('default', ['less', 'cssmin'])
```
now you can either run grunt build or grunt cssmin to generate the minified CSS file.

The grunt-css modules has csslint built-in, so you can also add a task to lint your css files.

More configurations/options can be found at https://github.com/jzaefferer/grunt-css