Anyone know of a good alternative?

[skeddles]

This module has tons of problems, it randomly doesn't work, messes up source mapping, and it hasn't been updated for 3 years.

Does anyone know of a more reliable alternative?

[KenEucker]

So many of the node packages surrounding gulp have collected dust over the last four years. Since it's still in use, and there are people interested in improving it, and it has active pull requests... it would be nice if there was active maintainers.

As for alternatives to gulp-include, I don't have experience with anything but gulp-include for this specific functionality, but I did find this:

https://www.npmjs.com/package/gulp-file-include

Doesn't look as clean, and the includes aren't comments, but it is an alternative.

[skeddles]

I looked into browserify and webpack, but they're both really confusing to set up with gulp, and add unecessary code.

Ideally I'd like something that just replaces require('path') with the exports from that module just like node, without any of the extra processing.

[wescouch]

I'm looking for the same thing as I update to Gulp4. Please let me know if you've found something!

[ryios]

I'm still using this on gulp 4, works great for me, some issues I've run into like it including files twice if it matches them on multiple source paths.

I don't use source maps so not to concerned with that.

Also I use this system to have one main file with includes in it, very similar to how webpack works with one main js file... etc.

[wescouch]

I found a solution to my issue and am following up on this for anyone who is searching for a solution in the future.

I solved how to import files by utilizing webpack with Gulp. I'll show the relevant codes below to understand how my new Gulp4 gulpfile.js works with scripts and imports:

scripts.js

/wp-content/themes/THEME/assets/development/scripts/scripts.js

I use a scripts.js file as a central location to house all the script files that I will call, including node modules. (I would eventually include requires for component-specific scripts, page-specific scripts, etc. that are housed in their own files/folders, but you get the idea from the code below)

// /* ==========================================================================
// Node Modules
//  ========================================================================== */
require('../../../../../../node_modules/gsap/all.js');
window.device = require('../../../../../../node_modules/current-device');

// /* ==========================================================================
// Globals
//  ========================================================================== */
require('./globals/anchor-links.js');
require('./globals/fade-in.js');

gulpfile.js

/gulpfile.js

In the gulpfile I have various pieces for my fonts, images, scripts and styles. I'm just focusing on scripts for this comment, so showing the necessary pieces below just for that (including watcher and livereload):

// Gulp Base Variables
const { gulp, series, parallel, src, dest } = require('gulp'),
      { watch } = require('gulp');

// Gulp Plugins
const del = require('del'),
      livereload = require('gulp-livereload'),
      webpack = require('webpack-stream'),

// File/Folder Paths
let paths = {
  cleanProd: './wp-content/themes/THEME/assets/production/*',
  scripts: {
    dev: './wp-content/themes/THEME/assets/development/scripts/scripts.js',
    prod: './wp-content/themes/THEME/assets/production/scripts',
    watch: './wp-content/themes/THEME/assets/development/scripts/**'
  },
};

// Scripts
function scripts() {
  return src(paths.scripts.dev)
      .pipe(webpack({
        // You have 3 options for mode, depending on which is best for you (https://webpack.js.org/concepts/mode/)
        mode: 'none',
        // Utilize Webpack's built-in source map (https://webpack.js.org/configuration/devtool/)
        devtool: 'cheap-eval-source-map',
        // We want our bundle to be named as such instead of the random name that webpack produces (not required, but nice for us)
        output: {
          filename: 'bundle.js',
        }
      }))
      .pipe(dest(paths.scripts.prod))
      .pipe(livereload({ start: true }));
}

// Clean the production folder and then compile scripts and then keep an eye on them to compile on change
exports.default = series(clean);
watch(paths.scripts.watch, { ignoreInitial:false }, scripts);

[KenEucker]

UPDATE:

I was able to have a conversation with the maintainer, @wiledal, and have agreed to provisionally join the github project to address the open pull requests. I am going to take some time to respond to the ones that seem the most important but I also urge anyone to make comments on any items that they feel are pertinent.

After I've approved and merged a few of the more important PRs (dependency updates), I will ask the community to pull down the master branch and test it before we publish a new version to NPM.

Thank you for your patience and understanding!

[thiagomajesk]

@KenEucker @wiledal How is the revival plan going on here? I'm seeing that after 3 months there's no sign of effective maintenance as intended.

[KenEucker]

@thiagomajesk is there specific maintenance that you are looking for? Three months ago, there was a slew of dependency updates and a removal of a deprecated package, as well as making the plugin compatible with gulp 4. Many issues were addressed, commented on, and all remaining issues have been assessed ( this one can be closed, for example ).

There have also been requests for features that we have openly encouraged pull requests for. While I currently have more time to focus on this project, that comes and goes. There are tests I would like to write, but I don't have as much time to add features I don't use right now.

Please do let us know if there are any specific issues you are looking to have addressed, or if you're running into any issues using gulp-include in your workflow.

[ryios]

I've been using gulp-include for a while and for the most part it's stable as is and works well.

The biggest gotcha is when you are specifying include paths to gulp-include, you need to be aware that it doesn't play well with files with the same name.

I.e. imagine you have

Path A: stage/vendor.js

And

Path B: src/js/vendor.js

And the path stage and the path src/js are setup as include paths for gulp-include which enables you to skip the path prefixes on include comments and just specify the file name.

Now in your main.js or w/e when you include "vendor.js" it won't know which one to grab as it has two files called vendor.js in include paths.

Easy fix: Make sure all files in your build have unique names.

This actually threw me for a loop for days, so wanted to mention it.

[thiagomajesk]

@KenEucker, @ryos recommended me this tool from another repo, so I came here to check if it's still actively maintained. I was specifically talking about your intent to keep maintaining the repo. I saw your comment about stepping up to the task, but there's no much activity since April (looking from the outside). What gave me the (perhaps wrong) impression is that there are issues that go back to 2014 still opened and 3 months without recent activity.

If the project is mature and feature-complete, there's a reason to take the development pace differently. If that's the case, I would like to propose an Issue clean up and improve documentation on the wiki with common configurations scenarios and examples (even though the lib seems dead simple to use).

My specific interest is to see if I can use it with typescript (commonjs) and sass to replace a Webpack configuration to improve my workflow.

[KenEucker]

@thiagomajesk

At version 2.4.1 with 12,149 downloads this week, I consider this module to be mature and feature-complete. Thank you for your suggestions, I think we, as a community, could provide some code examples in the repository that are not just in the readme.

I'd encourage you to try the package to see if it works for your needs and if you have any issues from there to get involved as you see fit.

[KenEucker]

@ryios,

In that scenario, you might use a common includePath between those paths and put some paths in your includes so that gulp-include knows that they should be separate files to be included.

For example:

...
includePaths: [ 'code/' ]
...
//=require src/js/vendor.js
...
//=require stage/vendor.js

Gulp-include will use the first file that it finds from the include paths and require ensures that it is only included once. While changing the filenames around to make use of full include paths does work, it may not be reasonable (see: vendors with identical filenames like index.js). Using a common includePath between the files will allow you to retain the same filenames, as well as let you know from a glance exactly which path that the vendor.js is being included from.

[ryios]

Thanks, in this specific example the root path of one file was "stage" and the other was "src" so the best way to handle it was to rename my files, or use exact paths in the include directives without having an includePath for it.

It's not a big deal, just something I wanted to mention in in case it trips up anyone reading this.

I believe there is an open issue for it, or was.