Inconsistent Results with Running Gulp from Visual Studio on Post Build

Question

I'm running gulp 3.9.0 and calling some gulp commands from Visual Studio 2013. The flow is such that whenever I build in VS, gulp should clean my temporary and output files, then after a successful build, compile my javascript assets into one file.

The problem is that, I've noticed that after running "gulp build", sometimes my assets are not generated at all. This even happens on the command line. After running "gulp clean" (which removes the output), I have to run "gulp build" twice just to see the output materialize. It's as if gulp is failing silently. Not sure if this is an issue with Node running on Windows or if I have misconfigured something.

Note that VS is responsible for compiling all TypeScript files into a single .js in the \output folder.

Apologies in advanced if there is a better way to do what I'm trying to do. Still a gulp/node newbie.

VS Pre-Build:

gulp clean

VS Post-Build:

gulp build

gulpfile.js:

var gulp = require('gulp');
var del = require('del');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var templateCache = require('gulp-angular-templatecache');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');

gulp.task("cleanOutdatedLibraries", function(){
    del("./Libs/*");
    del(['./myapp.js', './myapp.min.js', './myapp.css'])
});

gulp.task("cleanTemporaryFiles", function(){
    del("./output/*");
});

/** Run gulp clean on prebuild */
gulp.task('clean', ["cleanOutdatedLibraries", "cleanTemporaryFiles"])

gulp.task('copyNewestLibraries', function(){

    var bowerFiles = ['angular/angular.min.js',
        'angular/angular.js',
        'angular/angular.min.js.map',
        'angular-ui-router/release/angular-ui-router.min.js',
        'angular-local-storage/dist/angular-local-storage.min.js',
        'jquery/dist/jquery.min.js',
        'jquery/dist/jquery.min.map',
        'lodash/lodash.min.js',
        'angular-resource/angular-resource.min.js',
        'angular-resource/angular-resource.min.js.map',
        'momentjs/min/moment.min.js',
        'angular-loading-bar/src/loading-bar.js',
        'ngDialog/js/ngDialog.min.js'];

    gulp.src(bowerFiles, {cwd: "./bower_components/"})
        .pipe(gulp.dest('./Libs'));

});   

gulp.task('copyThirdPartyLibraries', function(){

    var thirdPartyFiles = ['jquery-ui.min.js',
        'angular-sanitize.min.js'];

    gulp.src(thirdPartyFiles, {cwd: "./_thirdparty/"})
        .pipe(gulp.dest('./Libs'));
});


/** Merge all Angular JS HTML templates into a cache */
gulp.task('mergeHtmlTemplatesIntoAngularCache', function(){
    gulp.src('app/**/*.html')
        .pipe(templateCache("templates.js", {
            module: "myapp"
        }))
        .pipe(gulp.dest('./output/'));    
});

gulp.task('produceMinfiedApp', function(){
    gulp.src(['app/**/*.js', 'output/typescripts.js'])
        .pipe(concat('bundle.min.js'))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(gulp.dest('./output/'));

    gulp.src(['output/bundle.min.js', 'output/templates.js'])
        .pipe(concat('myapp.min.js'))
        .pipe(gulp.dest('./'));

});

gulp.task('produceApp', function(){
    gulp.src(['app/**/*.js', 'output/typescripts.js'])
        .pipe(concat('bundle.js'))
        .pipe(ngAnnotate())
        .pipe(gulp.dest('./output/'));

    gulp.src(['output/bundle.js', 'output/templates.js'])
        .pipe(concat('myapp.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('mergeStyles', function(){
    gulp.src(['Styles/**/*.css'])
        .pipe(concat('styles.css'))
        .pipe(gulp.dest("./output/"));
    gulp.src(['app/**/*.css'])
        .pipe(concat('app.css'))
        .pipe(gulp.dest("./output/"));

    gulp.src(['output/styles.css', 'output/app.css'])
        .pipe(concatCss("./myapp.css"))
        .pipe(minifyCss({compatibility: 'ie10'}))
        .pipe(gulp.dest('./'));
});

/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries", 
    "copyThirdPartyLibraries",
    "mergeHtmlTemplatesIntoAngularCache",
    "produceMinfiedApp",
    "produceApp", 
    "mergeStyles"]);

score 1 · Accepted Answer · edited May 23 '17 at 12:31

/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries", 
    "copyThirdPartyLibraries",
    "mergeHtmlTemplatesIntoAngularCache",
    "produceMinfiedApp",
    "produceApp", 
    "mergeStyles"]);

These tasks (copyNewestLibraries, produceApp, etc.) run asynchronously, in no particular order. E.g. produceApp may finish before copyNewestLibraries, which is probably not what you want.

See How to run Gulp tasks sequentially one after the other for more info.

Inconsistent Results with Running Gulp from Visual Studio on Post Build

1 Answers1