Javascript 绑定gulp后内联JS ind EJS文件_Javascript_Gulp_Browserify_Ejs

Javascript 绑定gulp后内联JS ind EJS文件

javascript gulp

Javascript 绑定gulp后内联JS ind EJS文件,javascript,gulp,browserify,ejs,Javascript,Gulp,Browserify,Ejs,我正在尝试在EJS模板中以内联JS的形式获取gulp browserify组合的输出。由于我无法控制的原因，输出需要是一个带有内联JavaScript的html文件。我知道browserify会返回一个流，所以我尝试处理“data”事件，但无法用js文件中的实际代码填充脚本标记 Index.ejs <html> <script><%= cscript %></script> </html> 格尔普菲尔 const ejs = req

我正在尝试在EJS模板中以内联JS的形式获取gulp browserify组合的输出。由于我无法控制的原因，输出需要是一个带有内联JavaScript的html文件。我知道browserify会返回一个流，所以我尝试处理“data”事件，但无法用js文件中的实际代码填充脚本标记

Index.ejs

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

格尔普菲尔

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>


log（“这是一个测试”）；

实际输出：总胡言乱语

有人有过这样的经验吗？

所以，我能找到答案。答案在于节点流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'));
    });
});

ejs还需要稍作调整，以保持JS字符串在输出中不被替换

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

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