Question

我有以下两个任务：

gulp.task('compress', () => {
    return gulp.src('app/static/angular/**/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('./app/static'));
});

gulp.task('templates', () => {
    return gulp.src('app/static/angular/**/*.html')
        .pipe(htmlmin())
        .pipe(angularTemplateCache('templates.js', {
            module: 'myApp',
            root: '/static/angular'
        }))
        .pipe(gulp.dest('./app/static'))
});

它工作正常，但是我希望它们都连接到build.js中-如何将二者结合起来？

Answer 1

我假设上述任务在任务文件夹中的单独文件compress.js中

在gulpfile.js中，您可以使用以下代码：

//包括require-dir以包括任务目录中可用的文件

var requireDir = require('require-dir');

//然后进入任务目录

requireDir('./tasks');

然后您可以在gulpfile.js中创建一个构建任务，如下所示：

gulp.task('build', ['compress', 'templates']);

Answer 2

最后，我使用merge-stream将两个流合并为一个输出文件：

var gulp = require('gulp');
var concat = require('gulp-concat');
var htmlmin = require('gulp-htmlmin');
var angularTemplateCache = require('gulp-angular-templatecache');
var merge = require('merge-stream');

gulp.task('build', () => {
    var code = gulp.src('app/static/angular/**/*.js');

    var templates = gulp.src('app/static/angular/**/*.html')
        .pipe(htmlmin())
        .pipe(angularTemplateCache({
            module: 'myApp',
            root: '/static/angular'
        }));

    return merge(code, templates)
        .pipe(concat('build.js'))
        .pipe(gulp.dest('./app/static'));
});

gulp.task('default', ['build']);

将两个Gulp任务合并到一个JS文件中

2 个答案: