Combining AngularJS files into one file

Question

I'm building an AngularJS application. I don't have external dependencies, but I do have my application broken up into different files for controllers, services, etc.

I'd like to combine all this JS into a single file, so the browser has to make one request to get all the code rather than multiple requests (one for each file). Minification would also be nice.

From what I've been reading so far, Browserify is what I need to use. Does that sound about right? Is there anything folks recommend over this solution?

Answer 1

You can start using Grunt or Gulp . With these tools you can do much more than just concat and minify your files. For example if you choose to use Gulp:

• you will have to download gulp-cli $ npm install --global gulp-cli

• then create a gulpfile.js in your project and add gulp as dependency $ npm install gulp --save

• then add gulp-concat package which will concatenate your files $ npm install gulp-concat --save
• and finally add some code which will concat your files. Here is an example .

Leave a comment if you need any further help. Good luck!

---

Using Grunt here is an example gruntfile , assuming you have three different directories for controllers, directives and services for example. I also added watch plugin in case you need it.

$ npm i grunt-cli -g
$ npm i -D grunt
$ npm i -D grunt-contrib-concat
$ npm i -D grunt-contrib-uglify
$ npm i -D grunt-contrib-watch