Inlining JS ind EJS-Datei nach Bündelung mit Schluck

Ich versuche, die Ausgabe eines Gulp-Browserify-Combo als Inline-JS in einer EJS-Vorlage zu erhalten. Die Ausgabe muss eine HTML-Datei mit Inline-JavaScript aus Gründen sein, die ich nicht kontrollieren kann. Ich weiß, dass browserify einen Stream zurückgibt, also habe ich versucht, mit dem "Daten" -Ereignis herumzuspielen, aber ich kann das Skript-Tag nicht mit dem tatsächlichen Code aus der js-Datei füllen.Inlining JS ind EJS-Datei nach Bündelung mit Schluck

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

Erwartete Ausgabe:

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

Tatsächliche Ausgabe: Total Gibberish.

Hat jemand Erfahrung damit?

Quelle

2017-11-28 Anna Melzer

So konnte ich es herausfinden. Die Antwort lag in der Node-Stream-API. Um dies zu erreichen, müssen Sie die Blöcke während des Ereignisses data erfassen und die ejs-Methode während des Ereignisses end des Streams aufrufen.

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 benötigt als auch eine leichte Anpassung des JS String unescaped in der Ausgabe zu halten.

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

Quelle

2017-11-29 10:19:11

Inlining JS ind EJS-Datei nach Bündelung mit Schluck

Antwort

Verwandte Themen