Minify some files, combine all, with Grunt.JS

Question

I\'m moving a dev team away from Chirpy, an add-in for visual studio, for combination & minification of CSS/JS files, over to grunt as part of a workflow automation proc

Answer 1

If you've got time to migrate from Chirpy to Grunt, you surely have time to try a couple of different minifiers and check for one which doesn't break your forms.js module.

What you're doing is just fine, but I would argue in favor of using just uglify for everything. In my case, I copy all the scripts to a build folder, and then just run uglify on them.

I configured uglify like this.

uglify: {
    js: {
        files: { 'bin/public/js/all.js': 'bin/public/js/**/*.js' },
        options: {
            preserveComments: false
        }
    }
}

You can check out the repo on GitHub, it might give you a couple of ideas.

You can determine the ordering simply by being explicit about it when you define the files in your uglify target.

uglify: {
  js: {
    files: { 
      'bin/public/js/all.js': [
        'bin/public/js/IMPORTANT/**/*.js',
        'bin/public/js/something.js',
        'bin/public/js/else.js',
        'bin/public/js/unimportant/*.js',

        // you can even exclude stuff
        'bin/public/js/do-not-minify/**/*.js'
      ]
    }
  }
}

You can check Grunt file globbing patterns for more info.

Update

The order in which your files are described in the globbing pattern is the order in which they'll be processed, this is true for almost all tasks that take a glob in Grunt. If you can't uglify everything, I'm guessing you'll still want to concatenate. In that case, I'd advise you have a flow like the following pseudo-code, to get you going:

uglify: {
  js: {
    files: { 'bin/public/js/all.js': [
      // using whichever order of importance you need
      'src/public/js/**/*.js',
      '!the-ones-you-dont-minify'
    ]
  }
},
concat: {
  // using whichever order of importance you need
  'src/the-ones-you-dont-minify/**/*.js',
  '!the-ones-you-minified'
}

grunt.registerTask('build', ['clean', 'uglify:js', 'concat']);