Minimize CSS file with Grunt

Question

Minimize CSS file with Grunt

Navigation

#1 by (1 votes)
#2 by (-3 votes)

0

I would like to know how to create my css in a single line with grunt, follow my code below

// Copy source assets to _gh_pages
    copy: {
      assets: {
        files: [
          {
            expand: true,
            cwd: '<%= site.assets %>/public',
            src: ['**'],
            dest: '<%= site.dest %>/public/'
          },
          {
            expand: true,
            cwd: '<%= site.assets %>/root',
            src: ['*'],
            dest: '<%= site.dest %>/',
            rename: function (dest, src) {
            dest = dest + src.replace(/^_/, '');
            return dest;
            }
          }
        ]
      }
    },

javascript

asked by anonymous 04.03.2016 / 05:19

2 answers

Implementation of Identity in existing project - Not working Send querystring in a request with PHP

score 1 · Answer 1

To minify CSS files, a widely used package is grunt-contrib-cssmin . You can install it using the npm install grunt-contrib-cssmin --save-dev command.

Once installed, you need to load the package into Gruntfile:

grunt.loadNpmTasks('grunt-contrib-cssmin');

A simple task to perform what you need (in this case, even combining two files for only one CSS output):

cssmin: {
  target: {
    files: {
      'output.css': ['foo.css', 'bar.css']
    }
}

score -3 · Answer 2

You're on the right path!

In this your code the only thing you are doing is copying your files from one folder to another. Now you need to "minify", which is a process that you will perform on those files that you have copied. For this you need uglify .

I've separated a list of tutorials that will help you a lot in understanding how to create your Grunt scripts:

Good reading!