Minimize CSS file with Grunt

Asked

Viewed 99 times

0

People 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;
            }
          }
        ]
      }
    },

2 answers

1

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

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 including combining two files to only one CSS output):

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

-3

Browser other questions tagged

You are not signed in. Login or sign up in order to post.