Gulp

Question

我正在使用 gulp-replace 来修改静态 html。

搜索和文本值存储在数组中：

const stringReplace = require ( 'gulp-replace' );

const textValues = [
    [ 'global-app-title', 'My App Title' ],
    [ 'global-app-version', '01.01.00' ],
    [ 'global-comp-name', 'ABC Company, LLC' ],
    [ 'global-comp-name-logo', 'ABC' ],
    [ 'global-comp-brand', 'Marketing Solutions...' ],
etc...
];

基本实现（数组中的单个元素）

gulp-replace 对于 textValues 的单个索引工作正常：

gulp.task ( 'update-html-custom:dist', function () {
    return gulp.src ( [ paths.src.custom.html + '/**/*.html' ] )

        .pipe ( stringReplace ( textValues[ 1 ][ 0 ], textValuess [ 1 ][ 1 ] ) )
        .pipe ( gulp.dest ( paths.dist.custom.html ) )
} );

遍历数组

我正在尝试修改 gulp .pipe 命令以遍历 textValues 中的每个元素。但是，我的大多数 html 文件都会有多个匹配项（相同或不同的搜索字符串），所以我相信 gulp-replace 管道中需要某种循环 - 我必须更新所有在我交给 gulp.dest.

之前的比赛实例

This post 建议 gulp-replace 可以接受一个函数，所以我尝试了以下，但它出错了 'TypeError: dest.on is not a function':

gulp.task ( 'update-html-custom:dist', function () {
    return gulp.src ( [ paths.src.custom.html + '/**/*.html' ] )
        .pipe ( textValues.map ( (item) =>{
            stringReplace( item[ 1 ][ 0 ], item [ 1 ][ 1 ] )
            }))
        .pipe ( gulp.dest ( paths.dist.custom.html ) )
} );

有没有办法在管道命令中循环遍历我的数组？

Answer 1

解决方案

这可能不是最紧凑的代码，但它似乎有效：

const gulpEach = require ( 'gulp-each' );

const textValues = [
    [ 'global-app-title', 'My App Title' ],
    [ 'global-app-version', '01.01.00' ],
    [ 'global-comp-name', 'ABC Company, LLC' ],
    [ 'global-comp-name-logo', 'ABC' ],
    [ 'global-comp-brand', 'Marketing Solutions...' ],
etc...
];


gulp.task ( 'update-html-custom:dist', function () {
    return gulp.src ( [ paths.src.custom.html + '/**/*.html' ] )
        .pipe ( gulpDebug ( {title: 'file name: '} ) )

        .pipe ( gulpEach ( function ( content, file, callback ) {
            let updatedContent = content;

            textValues.forEach ( ( item ) => {
                let textPos = updatedContent.search ( item[ 0 ] );

                while ( textPos >= 0 ) {
                    updatedContent = updatedContent.replace ( item[ 0 ], item[ 1 ] );
                    textPos = updatedContent.search ( item[ 0 ] );
                }
            } )
            callback ( null, updatedContent );
        } ) )

        .pipe ( gulp.dest ( paths.dist.custom.html ) )
        .pipe ( browserSync.reload ( { stream: true } ) )
} );

gulp-每一个都好久没更新了，不过好像够稳定了...

Gulp - 管道内循环

Gulp - loop within pipe

arrays

str-replace