使用 gulp 捆绑后内联 JS ind EJS 文件

Question

我正在尝试将 gulp-browserify 组合的输出作为 EJS 模板中的内联 JS。由于我无法控制的原因，输出需要是带有内联 JavaScript 的 html 文件。我知道 browserify returns 一个流，所以我尝试使用 '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 捆绑后内联 JS ind EJS 文件

Inlining JS ind EJS file after bundling with gulp

javascript

ejs

browserify

gulp