Import / read variable from separate gulp file

Question

I'm looking to split my gulpfile.js assets or src variables into separate files so that I can manage them better. For example:

....

var scripts = ['awful.js', 'lot.js', 'of.js', 'js.js', 'files.js']

....(somewhere down the line)

gulp.task('vendorjs', function() {
    return gulp.src(scripts)

        .pipe(concat('vendor.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(paths.root + 'dist'))
        .pipe(notify({ message: 'vendorjs task completed' }));
});

So what I'm basically interested if theres a way to actually move to a separate file the scripts variable and be able to access it from gulpfile.js.

I've been looking into something like:

require("fs").readFile('gulp/test.js', function(e, data) {
   //(test.js would be the file that holds the scripts var)
});

Howerver while it does read the contents of the file, I still can't access it from the gulpfile.js. Any tips or ideas are much appreciated.

Answer 1

Node.js allows you to import other files using require(). It supports three types of files:

• JSON files. See DavidDomain's answer for that.
• Binary Node.js addons. Not useful for your use case.
• JavaScript files. That's what you want.

For JavaScript files the value returned from require() is the one that is assigned to module.exports in the imported file.

So for your use case:

gulp/test.js

var arrayOfFiles = ["awful.js", "lots.js"];
arrayOfFiles.push("of.js");
arrayOfFiles.push("js.js");
arrayOfFiles.push("files.js");
for (var i = 0; i < 10; i++) {
  arrayOfFiles.push("some_other_file" + i + ".js");       
}

module.exports = {
  scripts: arrayOfFiles
};

gulpfile.js

var test = require('gulp/test.js');

gulp.task('vendorjs', function() {
  return gulp.src(test.scripts)
    .pipe(concat('vendor.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(paths.root + 'dist'))
    .pipe(notify({ message: 'vendorjs task completed' }));
});

Answer 2

You could use a json file to store your assets or source file location in and load that into your gulp file.

For example:

// config.json

{
  "scripts": ["awful.js", "lot.js", "of.js", "js.js", "files.js"]
}

And in your gulp file you would do

// gulpfile.js

var config = require('./config');

var scripts = config.scripts;

console.log(scripts);