CODEWITHSUNDEEP
gruntjsyeoman
Aristona
Aristona

Reputation: 9361

How can I minify css files in different folders so I don't get pathing issues?

This is my GruntJS cssmin script.

cssmin: {
  add_banner: {
    options: {
      banner: '/* Minified on <%= grunt.template.today("yyyy-mm-dd hh:MM:ss")%> by GruntJS-cssmin */'
    },
    files: {
      'public/home_assets/css/compressed.min.css': [
        'public/home_assets/css/**/*.css',
        'public/home_assets/vendor/**/*.css'
        ]
    }
  }
},

It works correctly and minify CSS files. However, CSS files under css/vendor/vendorname folder minifies into css folder so their pathing gets messed.

For example, ./image.jpg should be ./vendor/vendorname/image.jpg otherwise their relativity gets broken.

How can I solve this issue? What kind of tricks can I use?

Upvotes: 2

Views: 3788

Answers (1)

Matthew Bakaitis
Matthew Bakaitis

Reputation: 11980

You can configure grunt-contrib-cssmin to process multiple target directories with corresponding destinations by modifying your grunt.initConfig lines for cssmin to something like this:

files: {
  './css/compressed.min.css': ['./css/**/*.css'],
  './vendor/compressedvendor.min.css':['./vendor/**/*.css']
}

Edit: Based upon your comments below, you wanted a single file and not two.

The sample Gruntfile.js shows how you would use grunt-contrib-concat to first join the files together then you can run cssmin (instead of uglify in the sample).

Your Gruntfile.js might therefore look like this as a result:

module.exports = function (grunt) {

    grunt.initConfig({
        concat: {
            dist: {
                src: ['./css/**/*.css', './vendor/**/*.css'],
                dest: './dist/tmp/concat.css'
            }
        },
        cssmin: {
            dist: {
                files: {
                    './dist/compressed.min.css': [ './dist/tmp/concat.css' ]
                }
            }
        }
    });

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

    grunt.registerTask('default', ['concat', 'cssmin']);
}

As you can see in the code above, you might want to consider whether you should have a source and destination file structure to make it easier to manage the files. You'll probably also want to review other grunt-contrib plugins like -clean to help automate even more build tasks...

Upvotes: 1

Related Questions