Add notices to auto-generated files with gulp

#npm #node #gulp

I wrote a little tool today to pop into my gulp workflow which writes some text to the top of files processed by gulp. The problem I find is that quite often you can be working on a project with source files and generated files (e.g. jsx -> js) and accidentally edit the wrong file, only for your changes to be overwritten.

This tool will put a notice at the top of auto-generated files to hopefully help put a stop to that. There are other packages that do this too, but so far in the past week there have been about 10 releases of gulp-header and quite a few of them were broken. Also they originated from godaddy so confidence in the package is pretty low!

Usage

You can use the default notice:

var gulp = require('gulp'),
    notice = require('gulp-notice');

gulp.task('default', function () {
    gulp.src('src/*.js')
        .pipe(notice())
        .pipe(gulp.dest('dist/'));
});

Which will prepend files with:

/* --------------------------------------------------------------------- *\
|  This code was auto-generated by a tool.                                |
|                                                                         |
|  Changes to this file may cause incorrect behavior and will be lost if  |
|  the code is regenerated.                                               |
\* --------------------------------------------------------------------- */

Or you can provide your own string as the first parameter:

var gulp = require('gulp'),
    notice = require('gulp-notice');

var text = '/* this file was auto-generated */';

gulp.task('default', function () {
    gulp.src('src/*.js')
        .pipe(notice(text))
        .pipe(gulp.dest('dist/'));
});

Which will prepend files with:

/* this file was auto-generated */

Working wth streams

If you're working with streams (e.g. vinyl-source-stream) then gulp-streamify will help you. Let's say you're using browserify with vinyl-source-stream, you can wrap gulp-notice with streamify and it'll work:

return b.bundle()

    .pipe(source(entry))

    .pipe(streamify(notice()))

    .pipe(gulp.dest('./public/js'));

Install it

npm install gulp-notice

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →