Question

使用Gulp.js，我希望能够正常编译我的js文件夹中的单个文件，但是连接子目录中的内容并将文件夹名称分配给连接文件。（还有一些linting和minification正在进行中）

示例来源

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

但是，子目录文件永远不会以这种方式编译为dest。我试过的其他事情也没有用过：

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

我已经有了正常运行的代码，所以我并没有被完全卡住，但我知道有更好的方法可以做到这一点。我还希望在运行我的uglifying和minifying之前检查一个.js扩展名（因为我只抓取.scss个文件，所以已经覆盖了样式）。任何见解都将非常感激。

Answer 1

您可以使用lazypipe构建可重复使用的处理管道。

一旦您确定了＆＃34;可重复使用的＆＃34;行为可以将其转换为可重用的块并多次调用它。

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

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

将 all 作为参数传递给管道：.pipe(header, banner.full, { package : package })

Gulp.js：如何动态连接子目录文件，而不是主目录中的文件

1 个答案: