How to minify multiple Javascript files in a folder with UglifyJS?

Question

I know it might seem like a huge step but I would really recommend using grunt.
It’s really simple once you get the hang of it.

Here’s a crash course:

Install NodeJS
Install Grunt CLI (just enter this in console/terminal):
```
npm install -g grunt-cli
```

Create a simple package.json file in the root of your project:

{
  "name": "my-project-name",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-watch" : "~0.5.3"
  }
}

Once you have that, just type: npm install to the console (in the root of your project).
This will install the necessary grunt plugins/dependencies (from the package file above).

Now create a simple gruntfile.js in the root of your project (it’s a kind of config for your project):

module.exports = function (grunt) {
    grunt.initConfig({

    // define source files and their destinations
    uglify: {
        files: { 
            src: 'js/*.js',  // source files mask
            dest: 'jsm/',    // destination folder
            expand: true,    // allow dynamic building
            flatten: true,   // remove all unnecessary nesting
            ext: '.min.js'   // replace .js to .min.js
        }
    },
    watch: {
        js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);

};

Once that’s done you just need to build it. Type in the console:
```
grunt
```
or – better – if you type execute the command below – grunt will monitor your source files for changes, and if you change any of them – it will build them automatically:
```
grunt watch --force
```

You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.

Leave a Comment Cancel reply