angularjs - Làm thế nào tôi có thể kết hợp hai nhiệm vụ gulp

Tôi đang sử dụng gulp để biên dịch các tệp typescript của mình và tạo tệp output.js.

Có thể có một nhiệm vụ duy nhất vừa biên dịch file TypeScript vừa kết hợp nó với các thư viện Angular không?

Đây là cách tệp hiện tại của tôi trông như thế nào (bên dưới). Đầu tiên nó chạy một tác vụ typescript tạo ra tệp output.js và sau đó nó chạy một tác vụ scripts kết hợp các tệp plugin script và 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'
 ]);

Câu trả lời #1

Tôi sử dụng một tác vụ watch cho việc này có chứa một loạt gulp.watch bên trong. Một cái để theo dõi sự thay đổi của .ts và chạy trình biên dịch typescript sẽ xuất ra một tập tin js ở bất kỳ vị trí nào và một gulp.watch khác theo dõi các tập tin .js và chạy tác vụ script. Trong trường hợp đó, mọi thứ sẽ được tự động hóa bởi watch và bạn không phải kết hợp các tác vụ thành một tác vụ.

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...
});

Câu trả lời #2

hãy thử run-sequence. Dưới đây là một ví dụ đơn giản.

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);
});