javascript - After modularizing an AngularJS app, how do you include the entire project in the index.html without having to type a ton of <script> tags -
i've been learning angular awhile , looking best ways modularize application. think understanding of going pretty well, i've looked around awhile , can't seem answer how of these .js files included inside of index.html without manually typing out bunch of tags. i've been looking grunt/gulp , how combining entire app 1 .js file, development i'm guessing don't want have re-run grunt or gulp every time want update app.
the basic idea
- concatenate js files (in proper order module definitions go before controllers/services)
- minify if production
- copy fixed path
- include single js file in html
- during development have grunt/gulp script watch changes in js files , re-run above steps don't have run grunt/gulp task manually.
now if using gulp here how typically handle above steps
gulp.task('process-js', function () { return gulp.src(jsfiles, {base: './'}) .pipe(gulpif(isprod, concat('all.min.js'), concat('all.js'))) .pipe(gulpif(isprod, uglify({mangle: true, preservecomments: 'some'}))) .pipe(gulp.dest(deployfolder + '/static/js')) });
where jsfiles array of files/folders contain angular app js files
var jsfiles = [ '!static/js/**/*.js', '!static/js/plugin/**/*.*', 'app/index/**/*module.js', 'app/index/**/*config.js', 'app/index/**/*ctrl.js' ];
note: use !
prefix exclude files/folders processing.
isprod
flag indicates whether preparing production or development.
during development use browsersync watch changes js files , re-run gulp task prepare all.js
. refreshes page in browser automatically.
gulp.task('run', function () { browsersync({ server: { basedir: deployfolder }, open: true, browser: ['google chrome'], files: deployfolder + '/**/*', watchoptions: { debouncedelay: 2000 } }); gulp.watch(jsfiles, ['process-js']); }); gulp.task('default', function () { runsequence( 'clean', 'run' ); });
Comments
Post a Comment