使用Gulp.js,我希望能够像往常一样编译js文件夹中的单个文件,但可以将放置在子目录中的内容串联起来,并将文件夹名称分配给串联后的文件. (也有一些棉绒和棉被继续)

范例来源

|-- js/
|   |-- main/
|   |   |-- script1.js
|   |   |-- script2.js
|   |   |-- script3.js
|   |-- detects/
|   |   |-- scriptA.js
|   |   |-- scriptB.js
|   |   |-- scriptC.js
|   |-- myplugin.js
|   |-- myplugin2.js

示例输出

|-- js/
|   |-- myplugin.js
|   |-- myplugin.min.js
|   |-- myplugin2.js
|   |-- myplugin2.min.js
|   |-- main.js
|   |-- main.min.js
|   |-- detects.js
|   |-- detects.min.js

我尝试过的

gulp.task('scripts', ['clean'], function() {
    return gulp.src('src/js/*')
        .pipe(plumber())
        .pipe(flatten())
        .pipe(tap(function (file, t) {
            if ( file.stat.isDirectory() ) {
                var name = file.relative + '.js';
                return gulp.src(file.path + '/*.js')
                    .pipe(concat(name))
                    .pipe(header(banner.full, { package : package }))
                    .pipe(gulp.dest(paths.scripts.output))
                    .pipe(rename({ suffix: '.min.' + Date.now() }))
                    .pipe(uglify())
                    .pipe(header(banner.min, { package : package }))
                    .pipe(gulp.dest(paths.scripts.output));
            }
        }))
        .pipe(header(banner.full, { package : package }))
        .pipe(gulp.dest(paths.scripts.output))
        .pipe(rename({ suffix: '.min.' + Date.now() }))
        .pipe(uglify())
        .pipe(header(banner.min, { package : package }))
        .pipe(gulp.dest(paths.scripts.output));
});

这实际上是可行的,但是我不喜欢在gulp-tap中和之后重复代码.理想情况下,我应该能够执行以下操作并将其反馈到流中：

gulp.task('scripts', ['clean'], function() {
    return gulp.src('src/js/*')
        .pipe(plumber())
        .pipe(flatten())
        .pipe(tap(function (file, t) {
            if ( file.stat.isDirectory() ) {
                var name = file.relative + '.js';
                return gulp.src(file.path + '/*.js')
                    .pipe(concat(name));
            }
        }))
        .pipe(header(banner.full, { package : package }))
        .pipe(gulp.dest(paths.scripts.output))
        .pipe(rename({ suffix: '.min.' + Date.now() }))
        .pipe(uglify())
        .pipe(header(banner.min, { package : package }))
        .pipe(gulp.dest(paths.scripts.output));
});

但是,子目录文件永远不会以这种方式编译到目的地.我尝试过的其他方法也无效：

1个

.pipe(tap(function (file, t) {
    if ( file.stat.isDirectory() ) {
        var name = file.relative + '.js';
        t.through(gulp.src(file.path + '/*.js')
            .pipe(concat(name)));
    }
}))

2

.pipe(tap(function (file, t) {
    if ( file.stat.isDirectory() ) {
        var name = file.relative + '.js';
        .pipe(gulp.src(file.path + '/*.js')
            .pipe(concat(name)));
    }
}))

3

.pipe(tap(function (file, t) {
    if ( file.stat.isDirectory() ) {
        var name = file.relative + '.js';
        gulp.src(file.path + '/*.js')
            .pipe(concat(name));
    }
}))

4

.pipe(tap(function (file, t) {
    var scripts;
    if ( file.stat.isDirectory() ) {
        var name = file.relative + '.js';
        scripts = gulp.src(file.path + '/*.js')
            .pipe(concat(name));
    }
    return scripts;
}))

我有正常运行的代码,所以我并没有完全陷入困境,但是我知道有更好的方法可以做到这一点.我还想在运行丑化和缩小之前检查.js扩展名(因为我只抓取.scss文件,所以样式已经涵盖了这一点).这里的任何见解将不胜感激.

解决方法:

您可以使用lazypipe建立可重用的处理管道.

一旦确定了“可重用”行为,就可以将其转换为可重用块并多次调用.

在您的情况下,这些重复处理是这些调用：

.pipe(header(banner.full, { package : package }))
.pipe(gulp.dest(paths.scripts.output))
.pipe(rename({ suffix: '.min.' + Date.now() }))
.pipe(uglify())
.pipe(header(banner.min, { package : package }))
.pipe(gulp.dest(paths.scripts.output));

因此,将调用转换为可重用的管道(请参阅底部的注释)：

var lazypipe = require('lazypipe');
//...
var process = lazypipe()
    .pipe(header, banner.full, { package : package })
    .pipe(gulp.dest, 'paths.scripts.output')
    .pipe(rename, { suffix: '.min.' + Date.now() })
    .pipe(uglify)
    .pipe(header, banner.min, { package : package })
    .pipe(gulp.dest, paths.scripts.output);

然后您可以多次使用它：

gulp.task('scripts', ['clean'], function() {
    //...
    return gulp.src('src/js/*')
        .pipe(plumber())
        .pipe(flatten())
        .pipe(tap(function (file, t) {
            if ( file.stat.isDirectory() ) {
                var name = file.relative + '.js';
                return gulp.src(file.path + '/*.js')
                    .pipe(concat(name))
                    .pipe(handle);
                    .pipe(process())  // <----- here
            }
        }))
        .pipe(process())  // <----- and here
});

一切都在一起：

gulp.task('scripts', ['clean'], function() {
    // Define reusable pipeline.
    var process = lazypipe()
        .pipe(header, banner.full, { package : package })
        .pipe(gulp.dest, 'paths.scripts.output')
        .pipe(rename, { suffix: '.min.' + Date.now() })
        .pipe(uglify)
        .pipe(header, banner.min, { package : package })
        .pipe(gulp.dest, paths.scripts.output);

    return gulp.src('src/js/*')
        .pipe(plumber())
        .pipe(flatten())
        .pipe(tap(function (file, t) {
            if ( file.stat.isDirectory() ) {
                var name = file.relative + '.js';
                return gulp.src(file.path + '/*.js')
                    .pipe(concat(name))
                    .pipe(handle);
                    .pipe(process())  // <----- use it here
            }
        }))
        .pipe(process())  // <----- and here
});

注意：
lazypipe使用惰性初始化,因此对.pipe()的调用与常规Gulp流不同.

而不是像这样调用插件：.pipe(header(banner.full,{package：package}))

您将所有参数传递给管道：.pipe(header,banner.full,{package：package})