Question

我正在尝试将Gulp整合到我正在进行的项目中。每当我认为我理解它时，我就遇到了一个让我感到困惑的场景。

基本上，我正在尝试生成两个文件并复制另一个文件。目前，我有以下内容：

var input = {
    file1: [
        'src/library/**/*.js'   
    ],
    file2: [
        'src/children/**/*.html'    
    ]
    file3: [
        'src/index.html'
    ]
};

var output = {
    dir: './dist',
    file1 : 'app.js',
    file2: 'app.html'
}

gulp.task('myTask', function() {
    var stream1 = gulp.src(input.file1)
        .pipe(concat(output.file1))
        .pipe(gulp.dest('dist'))
    ;

    var stream2 = gulp.src(input.file2)
        .pipe(concat(output.file2))
        .pipe(gulp.dest('dist'))
    ;

    var stream3 = gulp.src(input.file3)
        .pipe(gulp.dest('dist')
    ;
});

此时，据我所知，我基本上有三个流。如果我有一个流，我会做类似的事情：

return gulp.src(input.file1)
    ...
    .pipe(gulp.dest('dist'))
 ;

显然，这种方法不起作用。然而，在我的所有三件事发生之前，我无法让我的流程继续前进。我如何在gulp世界中解决这个问题？

Answer 1

听起来你有一些明确定义的任务：

连接库JavaScript文件。
连接源文件。
将index.html复制到分发目录。

为什么不将每项任务都作为自己的个人任务？

例如：

gulp.task('concat:libs', function() {
  return gulp.src(input.file1)
      .pipe(concat(output.file1))
      .pipe(gulp.dest('dist'));
});

gulp.task('concat:src', function(){
  return gulp.src(input.file2)
      .pipe(concat(output.file2))
      .pipe(gulp.dest('dist'));
});

gulp.task('copy', function(){
  return gulp.src(input.file3)
      .pipe(gulp.dest('dist');
});

然后你可以简单地创建一个取决于其他三个任务的第四个任务：

gulp.task('myTask', ['concat:libs', 'concat:src', 'copy']);

myTask声明中的数组表示对其他三个任务的依赖关系，gulp将在执行myTask之前执行这三个任务。

有关详细信息，请参阅：https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-deps-fn

使用Gulp任务执行多项操作

1 个答案: