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

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"
  }
}

Answer 2

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