Question

我试图在EJS模板中将gulp-browserify组合的输出作为内联JS。由于我无法控制的原因，输出需要是带有内联JavaScript的html文件。我知道browserify会返回一个流，所以我尝试使用'data'事件，但是我无法使用js文件中的实际代码填充脚本标记。

Index.ejs

<html>
<script><%= cscript %></script>
</html>

Index.js

console.log('this is a test');

Gulpfile

const ejs = require('gulp-ejs');

gulp.task('build:creative', () => {
    const js = browserify({
        entries: './src/creatives/index.js'
    }).transform('babelify').bundle()
        .on('data', (file) => {
                const jsText = file.toString();
            gulp.src('./src/creatives/index.ejs')
                .pipe(ejs({
                    cscript: jsText
                }))
                .pipe(gulp.dest('dist/creatives'));
        });
});

预期产出：

<html>
    <script>console.log('this is a test');</script>
</html>

实际输出：总胡言乱语。

有人有这方面的经验吗？

Answer 1

所以，我能够搞清楚。答案在于节点流API。要实现此目的，您需要在data事件期间连接块并在流的end事件期间调用ejs方法。

Gulpfile：

gulp.task('build:creative', () => {

    let jsString = '';
    browserify({
        entries: './src/creatives/index.js'
    })
    .transform('babelify')
    .bundle()
    .on('data', (file) => {
        jsString += file.toString();
    })
    .on('end', () => {
        gulp.src('./src/creatives/index.ejs')
            .pipe(ejs({
                cscript: jsString
            }))
            .pipe(gulp.dest('dist/creatives'));
    });
});

Index.ejs也需要稍微调整，以保持JS字符串在输出中不转义。

<html>
<script><%- cscript %></script>
</html>

在与gulp

1 个答案: