我如何结合两个 gulp 任务

Posted 2023-03-13

【中文标题】我如何结合两个 gulp 任务

【英文标题】：How can i combine two gulp tasks

【发布时间】：2015-08-01 00:41:22

【问题描述】：

我正在使用gulp 编译我的打字稿文件并创建output.js 文件。

是否可以有一个任务来编译打字稿文件并将其与角度库连接起来？

这是我当前文件的样子（下）。首先它运行一个创建output.js 文件的typescript 任务，然后它运行一个连接脚本插件文件和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'
 ]);

【参考方案1】：

我为此使用了一个监视任务，其中包含一堆gulp.watch。一个用于观察 .ts 更改并运行 typescript 编译器，该编译器将在任何位置输出一个 js 文件，另一个 gulp.watch 用于观察 .js 文件并运行脚本任务。在这种情况下，手表将自动完成任务，您不必将任务合并为一个任务。

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

【参考方案2】：

试试run-sequence。下面是一个简单的例子。

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