javascript - How to order injected files using Gulp? -
myangular application has following structure
- src/app/main/ | -main.js -main.controller.js -index.html i'm using gulp. after build completes, *.js files injected in wrong order in index.html. file main.js depends on main.controller.js, main.controller.js has injected before main.js.
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js --> <!-- inject:js --> <script src="app/main/main.js"></script> <script src="app/main/main.controller.js"></script> <script src="app/index.js"></script> <!-- endinject --> this gulpfile.js
'use strict'; var gulp = require('gulp'); var gutil = require('gulp-util'); var wrench = require('wrench'); var options = { src: 'src', dist: 'dist', tmp: '.tmp', e2e: 'e2e', errorhandler: function(title) { return function(err) { gutil.log(gutil.colors.red('[' + title + ']'), err.tostring()); this.emit('end'); }; }, wiredep: { directory: 'bower_components', exclude: [/jquery/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/] } }; wrench.readdirsyncrecursive('./gulp').filter(function(file) { return (/\.(js|coffee)$/i).test(file); }).map(function(file) { require('./gulp/' + file)(options); }); gulp.task('default', ['clean'], function () { gulp.start('build'); });
use gulp-angular-filesort in inject.js
https://www.npmjs.com/package/gulp-angular-filesort
to work correctly, each angular file needs have uniquely named module , setter syntax (with brackets), i.e. angular.module('mymodule', []).
example inject.js:
module.exports = function(options) { gulp.task('inject', ['scripts', 'styles'], function () { var injectstyles = gulp.src([ options.tmp + '/serve/app/**/*.css', '!' + options.tmp + '/serve/app/vendor.css' ], { read: false }); var injectscripts = gulp.src([ options.src + '/app/**/*.js', '!' + options.src + '/app/**/*.spec.js', '!' + options.src + '/app/**/*.mock.js' ]) .pipe($.angularfilesort()).on('error', options.errorhandler('angularfilesort')); var injectoptions = { ignorepath: [options.src, options.tmp + '/serve'], addrootslash: false }; return gulp.src(options.src + '/*.html') .pipe($.inject(injectstyles, injectoptions)) .pipe($.inject(injectscripts, injectoptions)) .pipe(wiredep(options.wiredep)) .pipe(gulp.dest(options.tmp + '/serve')); }); };
Comments
Post a Comment