javascript - Assemble every module into a single .js file -

i want minimize number of http requests client load scripts in browser. going pretty general question still hope can answers because module management in javascript has been pain far.

current situation

right now, in development, each module requested individually main html template, this:

<script src="/libraries/jquery.js"></script> <script src="/controllers/controllername.js"></script> ... 

the server runs on node.js , sends scripts requested.

obviously least optimal way of doing so, since models, collections, etc. separated own files translates numerous different requests.

as far research goes

the libraries have come across (requirejs using amd , commonjs) can request modules within main .js file sent client, require lot of additional work make each module compliant each library:

;(function(factory){      if (typeof define === 'function' && define.amd) define([], factory);     else factory();  }(function(){      // module code      exports = modulename; })); 

my goal

i'd create single file on server 'concatenates' modules together. if can without having add more code existing modules perfect. can serve single file client when requested.

is possible?

additionally, if manage build single file, should include open source libraries in (jquery, angular.js, etc.) or request them external cdn on client side?

what asking do, can tell, concat js files 1 file , in main.html have this

<script src="/pathlocation/allmyjsfiles.js"></script> 

if assumption correct, answer use 1 of 2 following items

gulp link or grunt link

i use gulp.

you can either use gulp on case case basis, means calling gulp command line execute gulp code, or use watch automatically on save.

besides getting gulp work , including gulp files need need, provide little of use answer.

in gulp file have this

var gulp = require('gulp'); var concat = require('gulp-concat'); ...maybe more. 

then have file paths need reduced 1 file.

var onlyproductionjs = [   'public/application.js',   'public/directives/**/*.js',   'public/controllers/**/*.js',   'public/factories/**/*.js',   'public/filters/**/*.js',   'public/services/**/*.js',   'public/routes.js' ]; 

and use info in gulp task 1 below

gulp.task('makeonefiletorulethemall', function(){   return gulp.src(onlyproductionjs)     .pipe(concat('wehavethering.js'))     .pipe(gulp.dest('public/')); }); 

i run task in command line calling

gulp makeonefiletorulethemall 

this call runs associated gulp task uses 'gulp-concat' files 1 new file called 'wehavethering.js' , creates file in destination 'public/'

then include new file main.html

<script src="/pathlocation/wehavethering.js"></script> 

as including files 1 file, including vendor files, make sure vendor code runs first. it's best keep separate unless have sure fire way of getting vendor code load first without issues.

update

here gulp watch task.

gulp.task('startthewatchingeye', function () {   gulp.watch(productionscripts, ['makeonefiletorulethemall']); }); 

then start server (yours may differ)

npm start // in different terminal window type gulp startthewatchfuleye 

note: can use movie or show reference wish! :)

now code up, every time make change in specified files gulp run task(s).

if want run karma test runner...

add following gulp file

var karma = require('karma').server;  gulp.task('karma', function(done){   karma.start({     configfile: __dirname + '/karma.conf.js'   }, done); }); 

then add task karma watch stated above this...

gulp.task('startthewatchingeye', function(){   gulp.watch(productionscripts, ['makeonefiletorulethemall', 'karma']); }); 

also

your specific settings may require few more gulp modules. usually, install gulp globally, each module. use them in various projects. make sure project's package.json has gulp modules need in dev or whatever.

there different articles on whether use gulp or grunt. gulp made after grunt few additions grunt lacking. don't know if grunt lacks them anymore. gulp lot though , find useful lot of documentation.

good luck!