Search code examples
angularjsgulp

Gulp Compiling Angularjs 1 Scripts in, incorrect order


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.


Solution

  • 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'])