Concat and minify JS files in Node

Question

Is there any module in NodeJS to concatenate and minify JavaScript files?

Answer 1

Maybe not exactly what you're looking for but Enderjs could work.

Answer 2

You'll be better using something like gulp / webpack to concat/organize/bundle your assets.

---

In order to join js file you can do as its done in twitter bootstrap makefile

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

This is just a concatenation of files with an output to a js file

Then you can install uglify-js to minify js:

npm -g install uglify-js

And perform this command with your path/file.js ofc:

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

As mentioned in comments since uglifyjs 2 you could also do:

uglifyjs --compress --mangle -- input.js

Answer 3

Try these two plugins for Grunt

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

You can install everything you need like so:

npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify

Then create your grunt file, like so:

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    concat: {
      options: {
        process: function(src, path){
          return '\n/* Source: ' + path + ' */\n' + src;
        }
      },
      src: [
        '../src/**/*.js'
      ],
      dest: '../bin/app-debug.js'
    },
    uglify: {
      src: '../bin/app-debug.js',
      dest: '../bin/app.js'
    },
    watch: {
      options: {
        atBegin: true,
        event: ['all']
      },
      src: {
        files: '../src/**/*.js',
        tasks: ['concat']
      },
      dist: {
        files: '../bin/app-debug.js',
        tasks: ['uglify']
      },
    }
  }

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

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

Finally, type grunt in the terminal and Grunt will start watching your JavaScript files for changes and automatically concat and uglify them (whenever you save a change to your js files in ../src/

Answer 4

I'd definitely suggest the Closure Compiler's simple mode.

Answer 5

If you already have uglify-js, your code uses some of the latest ES6 features (ECMAScript 2015) and it just gave you back parse errors on the first run, then install uglify-es:

npm install uglify-es -g

Or:

npm install mishoo/UglifyJS2#harmony

The explanation is in uglify-js-es6 package:

This is a temporary package containing the latest release of the 'harmony' branch of uglifyjs (UglifyJS2).

You can still run it normally with the uglifyjs command. A compress and mangle example:

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js

Which will produce a single file with all the JS files of a folder. The double dash (--) just prevents input files being used as option arguments.

Answer 6

I recommend using UglifyJS which is a JavaScript parser / mangler / compressor / beautifier library for NodeJS.

If you are interested in automation tools that do more than simply concatenate and minify files, there are the following solutions:

• GruntJS is a task-based command line build tool for JavaScript projects. The current version has the following built-in tasks:

  1. concat - Concatenate files.
  2. init - Generate project scaffolding from a predefined template.
  3. lint - Validate files with JSHint.
  4. min - Minify files with UglifyJS.
  5. qunit - Run QUnit unit tests in a headless PhantomJS instance.
  6. server - Start a static web server.

Besides this tasks there's a lot of plugins available.

• Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more. Integrations are built into all major IDEs and people are loving gulp across PHP, .NET, Node.js, Java, and more. With over 1700 plugins (and plenty you can do without plugins), gulp let's you quit messing with build systems and get back to work.

• Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

  1. Lightning-fast scaffolding - Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.
  2. Automatically compile CoffeeScript & Compass - Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.
  3. Automatically lint your scripts - All your scripts are automatically run against jshint to ensure they're following language best-practices.
  4. Built-in preview server - No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.
  5. Awesome Image Optimization - I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.
  6. AppCache manifest generation - I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.
  7. Killer build process - Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to.
  8. Integrated package management - Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser.
  9. Support for ES6 module syntax - Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.
  10. PhantomJS Unit Testing - Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.