How to compile multiple angularjs files into single application file

Question

I recently started using angularjs and at the moment I am working on developing someone else's code. The whole application is divided into multiple files, but at the end they are used from single application.js file.

I have a file looking like this:

//= require (some path)
//= require (some path)
angular.element(document).ready(function () {
    angular
        .bootstrap(document, [
            (multiple routes)
        ]);
});

Seems like I need to compile this file to generate a new, bigger file for whole app. I can't figure how, though.

Is there a gulp or grunt file attached to the project? There could be a task to run that will concatenate all javascript files into one. — Jesse Carter
– Jesse Carter, Commented Nov 25, 2014 at 14:01
There is none, but there is a chance it was not added to the repository. Thanks for the sugggestion, I will check that. — user3146472
– user3146472, Commented Nov 25, 2014 at 14:02
If there isn't a gulp or grunt file available it isn't that difficult to set one up that would grab all the javascript files from your project and combine them. I don't particularly recommend that as there are ways of doing lazy loading controllers/files on demand to reduce bandwidth but that might be a little bit more advanced. — Jesse Carter
– Jesse Carter, Commented Nov 25, 2014 at 14:10

ngasull · Accepted Answer · 2014-11-25 13:52:50Z

1

There are multiple ways to do this, you could pick an existing library like:

Uglify: traditional way to concatenate, minify and "uglify" JS sources into a single ".min.js" file. This is useful if you want to concatenate all js files in a whole directory structure more than using explicit relative requires.
Browserify: uses CommonJS's require to generate a single file wisely resolving dependencies. Looks more like the way you are looking to implement your app! Note that the require calls are resolved server (NodeJs) side.
RequireJS: specific require for browsers, means that your code would only run client-side.

edited Nov 25, 2014 at 13:52

answered Nov 25, 2014 at 12:36

ngasull

4,2161 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3146472 Over a year ago

I came up with browserify already, but (correct me if I am wrong) code above is not written they way browserify requires it to be written. I am trying to find exact tool the code was combined into this larger file. "//= require js/lib.js" seems a bit confusing for me.

ngasull Over a year ago

I understand better your problem now. No popular JS framework use the //= require syntax. I guess this has been commented and that the developer was using RequireJS, I'm adding the suggestion to my post.

user3146472 Over a year ago

Whole project is pretty messy and barely documented - I was bit confused by that. I was thinking about it being commented, but couldn't get it all right. I will get a look at RequireJS, thanks.

kalamar Over a year ago

Don't forget the AngularJS specifics here! Read this: stackoverflow.com/questions/18782324/…

Community · Accepted Answer · 2017-05-23 11:51:09Z

I wanted to just make this a comment to your original post, but it was too long. This isn't a definitive answer, so I apologize. Based on another post, (Google Closure Compiler Includes) I suspect they may have been using Google's Closure compiler, and using the require statements to trigger the Closure compiler's dependency analysis.

Apparently the compiler can translate the RequireJS 'require' statements into goog.require statements to establish ordering dependencies between the javascript files. So you may want to look at the monolithic file and see if there's any signs it went through the Closure compiler.

Collectives™ on Stack Overflow

How to compile multiple angularjs files into single application file

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related