visual-studio-2015angulargulptask-runner-explorer

Gulpfile not moving files from source to destination

I have created a gulpfile.js in Visual Studio 2015 project. It has been set to afterbuild. When I compile my project, I see the following message in my Task Runner Explorer. Below is the source code of the gulp file

The error message in task runner

cmd.exe /c gulp -b "C:\Tom\Personal\PracticeProjects\Angular2\AspNet5Angular2Demo\src\AspNet5Angular2Demo" --color --gulpfile "C:\Tom\Personal\PracticeProjects\Angular2\AspNet5Angular2Demo\src\AspNet5Angular2Demo\Gulpfile.js" default
[12:06:26] 
Process terminated with code 1

Gulp file 

   var gulp = require('gulp');    
gulp.task('moveToLibs', function (done) {
     gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'));

     gulp.src([
      'node_modules/bootstrap/dist/css/bootstrap.css'
    ]).pipe(gulp.dest('./wwwroot/libs/css'));
});

I have modified the above code as follows but still get the same error. I have installed merge2 and also mentioned in under devDependencies of my package.json file.

package.json

{
  "version": "0.0.0",
  "name": "Angular2AspNetCoreDemo",
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "systemjs": "0.19.27",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "bootstrap": "^3.3.6",
    "jquery": "^2.2.3"

  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "merge2": "1.0.2"
  }
}

gulpfile.js 

  /// <binding AfterBuild='default' />
    var gulp = require('gulp');
    var merge2 = require('merge2');        

    gulp.task('moveToLibs', function (done) {
        return merge2
        (
        gulp.src([
          'node_modules/angular2/bundles/js',
          'node_modules/angular2/bundles/angular2.*.js*',
          'node_modules/angular2/bundles/angular2-polyfills.js',
          'node_modules/angular2/bundles/http.*.js*',
          'node_modules/angular2/bundles/router.*.js*',
          'node_modules/es6-shim/es6-shim.min.js*',
          'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
          'node_modules/systemjs/dist/*.*',
          'node_modules/jquery/dist/jquery.*js',
          'node_modules/bootstrap/dist/js/bootstrap*.js',
          'node_modules/rxjs/bundles/Rx.js'
        ]).pipe(gulp.dest('./wwwroot/libs/')),

         gulp.src([
          'node_modules/bootstrap/dist/css/bootstrap.css'
        ]).pipe(gulp.dest('./wwwroot/libs/css')))

    });

I have also tried making it as two seperate tasks in my gulp file and still get the same error

/// <binding AfterBuild='default' />
var gulp = require('gulp');


gulp.task('moveToLibs', function (done) {
    gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'))
});
gulp.task('moveToLibsCss', function (done) {

     gulp.src([
      'node_modules/bootstrap/dist/css/bootstrap.css'
    ]).pipe(gulp.dest('./wwwroot/libs/css'))

});
Solution

  • I think the incorrect glob patterns might be part of the issue, you have:

    gulp.task('moveToLibs', function (done) {
    gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'))
});

    Instead try this:

    gulp.task('moveToLibs', function (done) {
    gulp.src([
      // 'node_modules/angular2/bundles/js', // folder doesn't exist
      'node_modules/angular2/bundles/angular2.*.js',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js',
      'node_modules/angular2/bundles/router.*.js',
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.js',
      'node_modules/bootstrap/dist/js/bootstrap.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'))
});

    Note the differences, they are minor but they are more than likely the cause of the issue. Take a look at my post on using Angular2 with ASP.NET Core, I detail an example gulp file that pulls from node_modules.

    Update

    Add a devDependency on gulp-debug and add:

    var debug = require("gulp-debug");

    Then add this to your stream to debug the files to ensure you're getting what you'd expect:

    gulp.task('moveToLibs', function (done) {
    gulp.src([
      // 'node_modules/angular2/bundles/js', // folder doesn't exist
      'node_modules/angular2/bundles/angular2.*.js',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js',
      'node_modules/angular2/bundles/router.*.js',
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.js',
      'node_modules/bootstrap/dist/js/bootstrap.js',
      'node_modules/rxjs/bundles/Rx.js'
    ])
    .pipe(debug())
    .pipe(gulp.dest('./wwwroot/libs/'))
});