Gulp Compiling Angularjs 1 Scripts in, incorrect order

Question

Why does this happen? When I compile the scripts using GULP the console will display errors, explaining that my directives and/or my controllers are not registered. Then to correct this error I create the app variable within the controller file and it then renders a new error, then I put the app variable declaration back and everything works fine.

This is my Gulp Script

var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'gulp.*'],
    replaceString: /\bgulp[\-.]/
});

var path = {
    jsFiles: "./js/**",
    scriptFile: "scripts.min.js",
    output: "dist/assets/"
};

var options = {
    ie8: true,
    warnings: true,
    mangle: true
};

gulp.task('scripts', function (cb) {

    return gulp.src(path.jsFiles)
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.jsdoc3(cb))
        .pipe(plugins.concat(path.scriptFile))
        .pipe(plugins.babel())
        .pipe(plugins.ngAnnotate())
        .pipe(plugins.uglify(options))
        .pipe(plugins.sourcemaps.write("../../maps"))
        .pipe(gulp.dest(path.output))
})

TLDR: MY Gulp task sometimes compiles the AngularJS directives and controllers out of order rendering my app declaration undefined.

Because ./js/** does not guaranty build order. Where does angular.min.js placed? — Drag13, Aug 27 '18 at 08:15
it'd be placed in js/ folder at the root. Inside js I have: /js /js/directives /js/data/ — ARLCode, Aug 27 '18 at 16:32
If I am not mistaken gulp.src takes also array. Try to pass array with path to angular.min.js as first element. Btw, it is good to separate third-party code from your own. It will helps if you using watch mode. — Drag13, Aug 27 '18 at 20:26
Oh this is my tasks/scripts.js file. I parsed out each task into their own seperate js file. And okay I'll give that a shot thanks. :) I'm currently trying build order and it seems to have fixed some errors. — ARLCode, Aug 27 '18 at 20:43
I ended up going your route, but I additionally didn't have a model for one of my data points so my directives were not being registered: https://stackoverflow.com/questions/21807834/controller-ngmodel-required-by-directive-cant-be-found — ARLCode, Aug 27 '18 at 23:37
Go ahead and answer the question so I can assign this problem solved. :) — ARLCode, Aug 27 '18 at 23:40

score 1 · Accepted Answer · answered Aug 28 '18 at 06:10

1

When you pass globe to the

gulp.src

No ordered is guaranteed, so it is possible to get wrong order time to time. But gulp.src also accepts array of the pathes you need to include and this should guarantee the order

So, try to split your bundle and pass path to the angular.min.js as a first element like this:

gulp.src(['path/to/angular.min.js', 'path/to/your/code'])

answered Aug 28 '18 at 06:10

Drag13

5,859
1
18
42

I ended up grouping each of the file types, directives, services, controllers, etc. Into their own seperate folders then passing them in by file type. Thanks bud! – ARLCode Aug 28 '18 at 07:02
No problemo :), glad to help – Drag13 Aug 28 '18 at 07:27

score 0 · Answer 2 · answered Aug 28 '18 at 06:16

0

You should sort angular files, and there are some libs that does that. https://www.npmjs.com/package/gulp-angular-filesort is one of them.

answered Aug 28 '18 at 06:16

felixmosh

32,615
9
69
88

Gulp Compiling Angularjs 1 Scripts in, incorrect order

2 Answers2