Gulp Gulp -管内循环

nfs0ujit 于 2022-12-08 发布在 Gulp

关注(0)|答案(1)|浏览(175)

我正在使用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.之前，我必须更新匹配项的所有示例。
这篇文章建议gulp-replace可以接受一个函数，所以我尝试了下面的方法，但是它错误地输出了'TypeError：dest.on不是函数“：

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

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

gulp

来源：https://stackoverflow.com/questions/69684651/gulp-loop-within-pipe

1条答案

按热度按时间

p1tboqfb1#

解决方案

这可能不是最严密的代码，但似乎可以工作：

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-each已经有一段时间没有更新了，但它似乎足够稳定...

赞(0）回复(0）举报 2022-12-08

我来回答

Gulp Gulp -管内循环

1条答案

相关问题

热门标签

最新问答