Replace with file contents.

[willfarrell]

Hi, I'm trying to replace a script include with an inline script of it's contents.

gulp.task('replace-inline', ['minify'], function() {
  return gulp.src(paths.distRoot+'index.web.html')
    .pipe(replace('<script src="js/async.min.js"></script>', '<script><%= gulp.file.read(paths.distRoot+\'/js/async.min.js\') %></script>'))
    .pipe(gulp.dest(paths.distRoot+'index.web.html'));
});

Not too sure about gulps inner working, idea how I might be able to do it?

[lazd]

It's easy to forget, but gulp is just JavaScript. There are no templates, no configuration object, and you're not limited by anything other than your imagination.

In this situation, you should use the Node.js fs module to read the file contents:

// Replace a single script
var fs = require('fs');
gulp.task('replace-inline', function() {
  return gulp.src(paths.distRoot+'index.web.html')
    .pipe(replace('<script src="js/async.min.js"></script>', '<script>'+fs.readFileSync('/js/async.min.js', 'utf8')+'</script>'))
    .pipe(gulp.dest(paths.distRoot));
});

However, a more robust way would be to match all scripts tags that are included with a root-relative URL and substitute their file contents automatically using a RegExp and String.replace with a function callback:

// Replace all script tags relative to the site root with inline scripts
var fs = require('fs');
gulp.task('inline-scripts', function() {
  return gulp.src('client/*.html')
    .pipe(replace(/<script src="\/js\/(.*?)"><\/script>/g, function(match, p1) {
      return '<script>'+fs.readFileSync('client/js/'+p1, 'utf8')+'</script>';
    }))
    .pipe(gulp.dest('dist/'))
});

As always, when writing cross-platform build scripts, don't forget to use path.join so your file paths use the correct separator for the OS. This is not done in the example above for simplicity.

[willfarrell]

Was actually just looking into fs. I'm not a node guy, so there are lots of new js api to learn. Thanks so much for the detailed reply, it was very useful. To avoid cross OS issues our dev environment, we run in docker wrapped with vagrant. All or our scripts are written to run in vagrant. Making scripts cross-os is such a head ache. Anyways, thanks again.

[bkonkle]

This doesn't actually work for me. I've got a task with some dependencies, and the file I need to read from doesn't exist until the dependencies are complete. With fs.readFile or fs.readFileSync, it tries to read the file immediately, and fails because the file doesn't exist yet.

My gulpfile: http://knkl.us/8x3Y

Any ideas?

[willfarrell]

.pipe(replace('/* REPLACE WITH CSS */', fs.readFileSync('build/screen.css').toString()))
// try
.pipe(replace('/* REPLACE WITH CSS */', function(match) {
      return fs.readFileSync('build/screen.css');
    }))

[bkonkle]

No joy, unfortunately. gulp-replace doesn't handle it:

Error: gulp-replace: Cannot do string replace with a function as replacement value

Might be a nice pull request, though.

In the meantime, I made my "wintersmith" and "sass" tasks return their streams, which seems to make them synchronous, seemingly contradicting the documentation here: https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support

http://knkl.us/uslX

Not sure why that works, but I'm not going to look a gift horse in the mouth. :-)

[lazd]

@bkonkle, if you return streams, then gulp knows when the task is complete as it listens for the end event on the stream -- this is asynchronous. If you return nothing, the task is considered complete when the function returns -- synchronous.

[lazd]

@bkonkle, string replace happens using replacestream, which doesn't support the replacement value as a function. I've filed an issue here eugeneware/replacestream#10. Once that is closed, I would accept a PR that enables this behavior in gulp-replace.

[bkonkle]

Ah, thank you for the explanation! That helps me understand Gulp much better. Also, thanks for your work on this plugin! ❤️

[eugeneware]

I've added this functionality guys in replacestream in 0.1.3.

[ashaffer]

In case anyone is still interested, i've made a plugin specifically for this use case:
https://github.com/ashaffer/gulp-inline

It also allows you to do streaming transformations of the inlined contents, so minification and other pre-processing for production can be done in this step.

[lazd]

@ashaffer, it looks like you plugin is a duplicate of gulp-smoosher, I've filed an issue against your repo so you and the other plugin's author can work together to create a single plugin.