我如何结合两个gulp任务

Question

I am using gulp to compile my typescript files and create the output.js file.

Is it possible to have a single task which compiles typescript file and concatenates it with angular libraries?

Here's what my current file looks like (below). First it's running a typescript task which creates the output.js file and then it runs a scripts task which concats the script plugin files and output.js .

'use strict';
var gulp = require('gulp')

var paths = {
  distScriptsDir: '../../Themes/mastter/Scripts',
  srcScriptsPlugins: [
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/angular/angular.min.js',
    'node_modules/angular-route/angular-route.min.js',
    'node_modules/angular-translate/dist/angular-translate.min.js',
    'node_modules/angular-translate/dist/angular-translate-loader-url/angular-translate-loader-url.min.js',
    'node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.js',
    'Scripts/angular-sticky.min.js',
    'Scripts/dragme.js',
    'Scripts/jasny-bootstrap.min.js',
    'node_modules/lodash/dist/lodash.min.js',
    'node_modules/angular-google-maps/dist/angular-google-maps.min.js'
  ],
  srcScriptsFile: [
    'output.js'
  ]
};


//typescript
gulp.task('typescript', function () {
  var ts = require('gulp-typescript');
  var tsResult = gulp.src( 'all.ts')
    .pipe(ts({
      noImplicitAny: true,
      out: 'output.js'
    }));
  return tsResult.js.pipe(gulp.dest(''));
});

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

  var concat = require('gulp-concat'),
      plumber = require('gulp-plumber'),
      uglify = require('gulp-uglify');

  return gulp.src(paths.srcScriptsPlugins.concat(paths.srcScriptsFile))
    .pipe(plumber({
      errorHandler: function (e) {
          console.log(e.toString());
          this.emit('end');
      }
    }))
  //    .pipe(uglify())
  .pipe(concat('main.js'))
  .pipe(gulp.dest(paths.distScriptsDir));

});

// default task
gulp.task('default', [
 'typescript',
  'scripts'
 ]);

Answer 1

I use a watch tasks for this that has a bunch of gulp.watch inside it. One for watching the .ts change and run the typescript compiler that will output a js file in whatever location and another gulp.watch that watches the .js files and run script task. In that case, things will get automated by the watch and you don't have to combine the task into one task.

gulp.task('watch', function() {
    gulp.watch(['dir/*.ts','otherdir/*.ts',...], ['typescript']);
    gulp.watch(['dir/*.js','otherdir/*.js',...], ['scripts']); //make sure to include the .ts result folder...
});

Answer 2

try run-sequence . Below is a simple example.

 gulp.task('task1', function(callback) { setTimeout(function() { console.log('task1 is done'); callback() }, 1000); }); gulp.task('task2', function(callback) { setTimeout(function() { console.log('task2 is done'); callback() }, 2000); }); gulp.task('tk12', function(callback) { return runSequence('task1', 'task2', callback); });