How can I use Gulp to add a line of text to a file

Question

I've been trying to figure out how to add a line of text to any type of file using Gulp.

For instance add:

@import 'plugins'

to my main.sass file.

Or add a CDN to an index.html file.

I did try:

gulp.task('inject-plugins', function(){
   gulp.src('src/css/main.sass')
    .pipe(inject.after('// Add Imports', '\n@import \'plugins\'\n'));
});

with no joy. Any idea how I could achieve this please?

Ulster

Answer 1

Depends on what you want to do.

If you just want to add text to the beginning or end of a file gulp-header and gulp-footer are your friends:

var header = require('gulp-header');
var footer = require('gulp-footer');

gulp.task('add-text-to-beginning', function() {
  return gulp.src('src/css/main.sass')
    .pipe(header('@import \'plugins\'\n'))
    .pipe(gulp.dest('dist'));
});

gulp.task('add-text-to-end', function() {
  return gulp.src('src/css/main.sass')
    .pipe(footer('@import \'plugins\''))
    .pipe(gulp.dest('dist'));
});

If you have some kind of "anchor" text in your file you can use gulp-replace:

var replace = require('gulp-replace');

gulp.task('replace-text', function() {
  var anchor = '// Add Imports';
  return gulp.src('src/css/main.sass')
    .pipe(replace(anchor, anchor + '\n@import \'plugins\'\n'))
    .pipe(gulp.dest('dist'));
});

Finally there's the swiss army knife of vinyl file manipulation: map-stream. This gives you direct access to file contents and allows you to do any kind of string manipulation that you can think of in JavaScript:

var map = require('map-stream');

gulp.task('change-text', function() {
  return gulp.src('src/css/main.sass')
    .pipe(map(function(file, cb) {
      var fileContents = file.contents.toString();
      // --- do any string manipulation here ---
      fileContents = fileContents.replace(/foo/, 'bar');
      fileContents = 'First line\n' + fileContents;
      // ---------------------------------------
      file.contents = new Buffer(fileContents);
      cb(null, file);
    }))
    .pipe(gulp.dest('dist'));
});

Hamhung

Don't forget to add those libraries! If you are using npm: add them to "devDependencies": {..} in package.json file, and run "npm install" – Seta

in case, if i want to add pone line in same file, how can i give dest location? – Taboo

seems like map-stream is deprecated – Mcclean