Search code examples
gulpgulp-header

How to add current source filename to gulp-header


I minify and concatinate vendor files. It would be nice to separate the scripts in vendor.min.js with some info (like the original filename). I am using gulp-header to add a headers to my output file.

// Minify vendor JS
gulp.task('minify-vendor-js', function() {
    return gulp.src([
            'lib/**/*.js'
        ])
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
        .pipe(header("// Vendor Package (compressed) - all rights reserved to the respective owners\r\n"))
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('js'))
});

vendor.min.js should look like this (note the "compressed from..." headers:

// compressed from jquery.js
!function(e,t){"object"==typeof module&&"object"==typeof module.exports?mod ...

// compressed from bootstrap.js
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript ...

How can I get the current gulp.src filename into the header text?


Solution

  • You can add gulp-tap to your pipeline which can inspect each file in the stream and extract info about or from it:

    var path = require('path');
    var tap = require('gulp-tap');
    
    // Minify vendor JS
    gulp.task('minify-vendor-js', function() {
    return gulp.src([
            'lib/**/*.js'
        ])
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    
        // .pipe(tap(function (file) {
        //    file.contents = Buffer.concat([
        //     new Buffer( '//  compressed from ' + path.basename(file.path) +  '\r\n'),
        //      file.contents
        //    ]);
        // }))
    
        // EDIT: replaced the above tap pipe with the following
    
        .pipe(header('//  compressed from ${filename} \r\n'))
    
        .pipe(concat('vendor.min.js'))
    
        // .pipe(tap(function (file) {
        //   file.contents = Buffer.concat([
        //     new Buffer( '// Vendor Package (compressed) - all rights reserved to the respective owners\r\n\r\n'),
        //     file.contents
        //   ]);
        // }))
    
       // either another tap (above) or header works here
    
        .pipe(header("// Vendor Package (compressed) - all rights reserved to the respective owners\r\n\r\n"))
        .pipe(gulp.dest('js'))
    });
    

    It doesn't look like gulp-header allows you to use a function with each file as an argument so I suggest gulp-tap which does.

    EDIT: gulp-header does not allow a function argument but does provide access to a resolved file and filename ala ${filename}. So I removed the first tap pipe for a much simpler gulp-header pipe.