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 process.

In chirpy, the config looks something like this (truncated for brevity):

<FileGroup Name="scripts.combined.js"  Minify="both">
    <File Path="forms.js" Minify="false" />
    <File Path="cookie_monster.js" Minify="true" />
    ...
</FileGroup>

So in this abridged case, I have 2 files. One needs to be minified, the other doesn't. (according to the folks here, minifying forms.js breaks functionality, and I haven't been allocated time to fix that yet).

In grunt, I need to run a minification task on some of the files in this list, but not on others. I then need to run a concat task on all files (minified or otherwise).

Given that uglifyJS needs a dest set to output the minified file, do I simply set this to something like temp.min.js, and in my concat task, use this file to build my scripts.combined.js file [comprised of both minified & unminified files], and use grunt clean to remove the temp.min.js file?

Is there a better way to do this?

[EDIT TO ADD] I'm also concerned about potential load-order conflicts. The current tool is configured as both "combine all of these files", with a flag on each file indicating whether or not it should be minified. I'm not sure how to replicate this workflow w/ grunt

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']);

Answer 2

1. Install node.js

2. Add gruntfile.js and package.json to root of project (modify the paths of the files as you want in gruntfile.js(may need to open in textpad as may not show in visual studio)

3. Open Node.js terminal (command prompt) and go to project directory

4. type:

   npm install grunt-ts --save [press enter]

   npm install grunt-cli -g [press enter]

   grunt [press enter]

(if there are missing modules install them typing: npm install [module name] )

eg npm install grunt-contrib-uglify npm install grunt-contrib-watch

Then type grunt

should minify files with no errors as long as javascript files are missing erros(run through jsHint.com)

this is my gruntfile.js.....

module.exports = function (grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css'
            },
            js: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js'
            }
        },
        cssmin: {
            css: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/min/production.min.css'
            }
        },
        uglify: {
            js: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/min/production.min.js'
            }
        },
        watch: {
            css: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }
        }
    });

    // 2. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

};

THIS IS MY package.json file

{
  "name": "Grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "*"
  },
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.11.13"
  }
}