Hi,
I've run into a snag now that my src file is just one main.js input; even with .jshintignore set to avoid the specific src files, it still checks each as the reference to them doesn't appear to be passed through the pipe. Wanted to see if you had any tips around this or if I'm thinking of this incorrectly. Thanks!

The first "include" create a double return per line.

The followings "include" don't have this problem.

This is the original file:

utils.uuid = function uuid(a){
    return a ?
        (a ^ Math.random()*16 >> a/4).toString(16) :
        ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,this.uuid);
};

This is the file included:

            utils.uuid = function uuid(a){

                return a ?

                    (a ^ Math.random()*16 >> a/4).toString(16) :

                    ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,this.uuid);

            };

Example file:

//= require handler=json src/json/myJSON.json

Example build process:

gulp.src([
    'src/js/file.src.js',
    ])
    .pipe(include({
        typeHandlers: {
            json: function (fileContent) {
                return 'list.push(JSON.parse("'+escapeJSON(fileContent)+'"));';
            }
        }
    }))
    .pipe(rename('file.js'))
    .pipe(gulp.dest('assets/js/'));

My current method for inserting JSON:

list.push(
//= require src/json/myJSON.json
);

//Pray that it works

The variables used by this plugin are not scoped properly, i.e. encapsulated in an IIFE, such that when two instances of include run in parallel with different includePaths for instance, it's getting very messy.

For now, am reloading the module for each successive call:

delete require.cache[require.resolve("gulp-include")];
var include = require("gulp-include");

Glob support would be pretty great.

//= require lib/twitter/bootstrap/bootstrap-{transition,affix,alert,collapse,dropdown}.js

Is there support for css files? The default application.css for rails contains this:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

But this doesn't get processed. When I add my own require rule:

/*
= require_tree test
*/

This gets generated:

= require_tree test
.color {
    color: red;
}


*/

My glob looks like this

'public/**/__js/**/*.js'

and I have the following files:

// public/foo/__js/bar.js
//= include qux.js

// public/foo/__js/qux.js
alert('qux');

When running:

gulp.src('public/**/__js/**/*.js').pipe(include()).dest('dest');

I get the error:

File not found: /var/www/public/qux.js

Shouldn't it be looking for /var/www/public/foo/__js/qux.js instead?

I recently started using gulp-include to bring in multiple types of files (js, css, html snippets) into a final html file for a micro project. I noticed that with every use of include there's a new line break at the end of the text included.

Example, if I use the following:

<script type="text/javascript">
    //= include includes/scripts.inc.js
</script>

The last line of my file is simply a } but when rendered/included I end up with

<script type="text/javascript">
    // ... the rest of my file
    }

</script>

I poked around at the index.js file and noticed on line 87 that a line break is added. Is this line break fully necessary?

Thanks!

My team was recently using gulp-include and were building multiple entry points in parallel (using one invocation of gulp-include in the gulp file).

Some of our code should only be included once, hence we required (instead of including it). However, this prevented it from being added in other entry points.

What are peoples' thoughts on this? In the way we're using it, "require" would ideally mean "require once in the recursive building of each entry point file", not "require once across all entry points", but I can appreciate this behaviour may be expected in some (possibly a minority of?) instances.

So would there be support behind a third command? Possibly a require_per_entry option?

My other thoughts on this are that possibly "require" is a little confusing - is is synonymous with require in ruby I guess (but ruby's include is rather different), but on the other hand, PHP has both "require" and "include", which both behave similarly to gulp-includes "include". I wonder what people think of the alternative names which are perhaps a little clearer? (still supporting require for backwards compatibility):

• "include"
• "include_once"
• "include_once_per_entry_point"

I'd be happy to put in a pull request for something akin to include_once_per_entry_point, or something similar, assuming it would be appreciated?

When we import a JS file with quotes like "`", we have an error.

Example:

--- JS line

throw new Error('selector option must be specified when initializing ' + this.type + ' on the window.document object!')

--- Error with Gulp include
...\assets\js\dev\general.js:63:27: error: unexpected identifier
//throw new Error('←[1;31mselector←[0m option must be specified when initializing ' + this.type + ' on the window.document object!')

←[1;31m ^^^^^^^^←[0m

Best regards,

Stéphane

replace

content = content.replace(matches[i], replaceContent);

to

content = content.replace(matches[i], function() { return replaceContent; });

specials: $$, $&, $`, $', $n, $nn

'abc'.replace('b', "1$'")
=> "a1cc"

'abc'.replace('b', function() { return "1$'"; })
=> "a1$'c"

Hi there!

I'm using this technique to include my files:

`
//= require "vendor/jquery/jquery.js"
`
#= require "modules/a.coffee"

gulp.src("app.coffee")
    .pipe(include({
        extensions: "coffee"
    }))
    .pipe(coffee())
    .pipe(include({
        extensions: "js"
    }))

But the resulting file is not valid because of a weird replacing issue.

On the code relating to jQuery there is a string substitution that should not occur.

Original jquery.js file:

nid = old.replace( rescape, "\\$&" );

jquery.js section on resulting file after gulp-include:

nid = old.replace( rescape, "\\//= require "vendor/jquery/jquery.js"" );

Because I'm in the dilemma right now I'm wondering if other users might have the same use case as I do:

I need to do include code files conditionally (due to different build targets with different instruction set), therefore it would be nice if I could define an environment variable which is passed via e.g. include( { buildVersion: 1.0}) and I can require or include the files based on a condition.

Or does somebody of you guys have a convenient solution for this?
Currently I'm looking at gulp-regex-replace to do this job

Thanks

When we pass several files, only first file is processed.

// only test1.js is processed, test2.js is ignored
gulp.src(["test1.js", "test2.js"]) 
 .pipe(gulpInclude())
 .pipe(gulp.dest("./out"));

Minimal reproducing example: https://github.com/PFight/gulp-include-bug

Note, if I replace //=require to //=include, then everything is works. So, gulp-include consider, that require in separate files as in one scope, and ignore second require.

My files test1.js and test2.js are totally independent. How can I force gulp-include to process them separately?

I was testing your plugin when I found this weird behavior.
My gulp task looks like this. (uglify commented-out on purpose)

// gulpfile.js

gulp.task("scripts", function() {
    return gulp
        .src("./_source/scripts/site.js")
        .pipe(sourcemaps.init())
        .pipe(include()).on("error", console.log)
        // .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./assets/js"));
});

the src file looks like this

// site.js input/gulp.src

//=include functions.js
//=include ../../vendor/package/js/doesntexist.js

It DOES NOT LOG ERRORS, it simply continues and the output file ends up looking like this
The include/require statement ends up in the output file.

// site.js output/gulp.dest

console.log("functions.js was included");

//=include ../../vendor/package/js/doesntexist.js

Similar to the gulp-sass plugin it'd be great to be able to pass a "IncludePaths" option, so when include runs it looks in the included path as well ass the current location for a file to make things simpler.

It would be awesome to have require_tree available as in Rails assets pipeline. It should include all files inside given path.

When including a HTML file the resulting file does not have the same indentation as the base file. Some of the nesting is broken. Often the first line is 1 indentation less than it should be.

Perhaps this is due to CRLF?

I am using gulp-include and eslint, but my eslint spits out the wrong line numbers for included files warnings and errors OR I get a bunch of no-unused-vars and no-undef errors, but proper line numbers. Any way I can get correct line numbers AND proper warnings?

Thanks in advance!

Having the following file used for inclusion

# basic-include.tcl
#=require   deep_path/b.tcl
#=require   deep_path/b.tcl

and deep_path/b.tcl looking as follows:

# b.tcl

leads to the following failing test:

1) gulp-include File including should replace special comments with file contents in tcl files:

    AssertionError: expected '# basic-include.tcl\n# b.tcl\n# b.tcl' to equal '# basic-include.tcl\n# b.tcl\n#=require
 deep_path/b.tcl'
    + expected - actual

     # basic-include.tcl
     # b.tcl
    -# b.tcl
    +#=require   deep_path/b.tcl

    at Stream.<anonymous> (E:\temp\gulp-include\test\main.js:41:41)
    at include (E:\temp\gulp-include\index.js:33:7)
    at Context.<anonymous> (E:\temp\gulp-include\test\main.js:44:19)

Using other comment styled (// or /*) works fine though

Hi! Awesome plugin, love it very much! So simple include/require instead of all this bullshit with Webpack or Browserify, just like in Sass 😅

I have an idea: like in gulp-inject#optionsstarttag, I want to control the syntax of how I use gulp-include.

For example:

.pipe(include({
    template: {
        js: (type, file)=> {
            return `//=${type} ${file}`
            // returns //=require "file.js"
            // or //=include 'file.js'
        }
    }
}))

This will be a default setting for JS files.

I want to use require()-like syntax to allow my editor to hint me relative paths by dropdown when it's uncommented, so I write require(''), hit Ctrl+Space and editor opens a popup with matched files:

And then I comment it and add = symbol, so I have this:

//=require('../../node_modules/jquery/dist/jquery.js')

And I sure that I have the right path.

But now every time I add //require I have to remove ( and ) to make it work.

If there will be an option to modify this comment template, I will add parentheses to it:

.pipe(include({
    template: {
        js: (type, file)=> {
            return `//=${type} (${file})`
        }
    }
}))

Is it possible to include files that only exist in the stream?

For example: I'm generating assets from a bower manifest and I would like to include those instead of the source files:

    var bowerSrc = gulp.src(bowermf()
      .pipe(flatten());
    var appSrc = gulp.src(paths.scripts);
    var stream = merge(appSrc, bowerSrc);

    stream.pipe(debug());

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

gulp-debug outputs this:

[15:26:48] gulp-debug: (2014-08-25 13:26:48 UTC)

File
cwd:      ~/Public/advertentietool
base:     ~/Public/advertentietool/app/assets/javascripts/
path:     ~/Public/advertentietool/app/assets/javascripts/site.js
contents: //= include app/assets/vendor/jquery.js...

[15:26:48] gulp-debug: (2014-08-25 13:26:48 UTC)

File
cwd:      ~/Public/advertentietool
base:     app/assets/vendor
path:     app/assets/vendor/jquery.js
contents: /*!
 * jQuery JavaScript Library v2.1.1...

If it's needed I can provide a repository with a simple testcase.

There is no source map support.

Files are not included if the require comment has space(s) at the end

So basically the only way for a correct mapping is to have one include with no other code in js file. Adding anything gives an incorrect map for everything beyond the first include or first lines of code whichever comes first.

Here is an example of the issue. To build npm install and gulp (or gulp watch). And then open index.html in chrome. Check the lines referenced by the console in devtools.

As you can see in the photo, the mapping is wrong.

When I follow the instructions in the README, my file successfully concatenates other livescript files. It fails to require any js files I include

``
//= require vendor/jquery.js
``
#=require require/thing.ls

As you can see I am using double backticks, which is livescript's equivalent to inline js in coffeescript.
In the resulting javascript all I get is

//= require vendor/jquery.js
// ....my app code here

Instead of concatenating the file contents the comment stays intact

Hi there!

I'm trying to use gulp-include then gulp-webpack ...but not succeed for now.
It seems to ignore the incude part... I see my //= require ./thing.js in the bundled file.

Is anyone know how to fix this?

JS task:

gulp.src(config.src_dir + '/js/main.js')
        .pipe($.include())
        .pipe($.webpack(config.webpack))

        .pipe(gulp.dest(config.public_dir + '/js'));

main.js

console.log('-> main');

//= require ./yepee.js

yepee.js

console.log('ᕕ( ᐛ )ᕗ <( Yepee! )');

The regular expression currently used will match things that it should not because it's just matching on an equals sign. For instance, it will match and then break.

 var module = require('example');

A tighter regex pattern would probably solve this.

This is driving me crazy. I put this in my index file

<!--=include www/app/**/**/*.js -->
<!--=include www/app/**/*.js -->
<!--=include www/app/*.js -->
<!--=include www/templates.js -->

and have include = require("gulp-include"); in my gulpfile. I'm new to gulp, usually use grunt but working on someone else's project. Am I missing something obvious? It just prints out the comments.

When using Snockets, for example, you can omit the .js in the // require statement. Is this something that's already supported or otherwise that you'd like to have contributed?

Hi and thank you for this library,

i'd like to have a directive that would include a file only if it exists. If it don't exists, it would fail silently.

Something like this:

//=include-if-exists vendor/vendor.js 

It would be really useful, so I could simply delete files that i don't need for a particular project.

Thank you

Perhaps when using the include_tree statement, assets that have previously been included should not be included again.

I am missing pre and post processing functions for each included file. Those are required in my use case in order to prepare an arbitrary file to be inserted into javascript.

Something simple, like (contents, filename, extension) => contents would do the trick here. I have tried other solutions with temporary folders but that isn't working because the filenames are the same for multiple include paths where both files make it into the build.

like:

...
let tpl = '/*=include path/to/template.html */';
...

Hi there! 👋

I know which are the purposes of this plugin, but I'm curious to see how you'd solve this situation I'm involved.

Here's the deal:

I want to have a main file which includes all JS and Coffee files needed for the app. Something like this:

#= require 'file1.js'
#= require 'file2.coffee'
#= require 'file3.js'

Right now this is not possible using gulp-include and gulp-coffee because the inclusion of the *.js files will cause CoffeeScript compilation errors.

How would you solve this need? Maybe making a new Gulp plugin (gulp-include-coffee)? I don't like this approach because Gulp plugin are supposed to do just one thing, and do it well.

Maybe giving gulp-include an option to set the file extension which will be included? Something like:

gulp.src('./src/app/app.coffee')
  // First parse `app.coffee` file and include only `coffee` files
  .pipe(include({
    extension: '.coffee'
  }))
  // Compile the result with CoffeeScript
  .pipe(coffee())
  // Include the rest of the includes (in the example, plain old JS files)
  .pipe(include())
  .pipe(gulp.dest('./dist/'));

I don't know, I'm kind of lost with this… What do you think?

gulp-util has been deprecated recently. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is popular but still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

• https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• gulpjs/gulp-util#143

Hi,
Thanks so much for creating this! I've run into a snag now that my src file is just one main.js input; gulp-changed doesn't appear to be picking up any changes from the included files; I running this check after I include that main file. Wanted to see if you had any tips around this or if I'm thinking of this incorrectly. Thanks!

Hello,
I am currently trying to use this module and running into the problem that whenever I try to process require directives it first resolves them as expected but then (when it would be done) it keeps calling the processInclude() function with the already processed file until I get a "RangeError: maximum call stack size exceeded."

How to include or require from node_modules?
I use this code //= require ../../../node_modules/jquery/dist/jquery.js, but it is not convenient.
I'm try to use webpack or browserify, but they add a lot of unnecessary code.
Thank you

The plugin is mangling some files, I am simple including longer library files, and they are being generally chopped up. This is not consistent (sometimes it will work), and has happened on several different files. Other people I am working with have had the same problem. To reproduce it, just include a long file.

I was trying to use some coffeescript from a Rails/Sprockets project, and ran into an issue that took a little while to sort out:

#= require (...) doesn't get picked up by gulp-include

while

#=require (...) works as expected (no space before the require)

If we have a scenario where

File 1:

//= require myfile.js
//= require someotherfile.js
//= require ../somemodule/main.js

somemodule/main.js:

//= require something.js
//= require blah.js

We're not going to get all the files from somemodule/main.js are we?

When including files, it should be useful to retain tab. Let me explain with an example:

describe "Unit tests", ->
  #= include "test1.coffee"

describe "Test 1", ->
  it "Awesome test", ->
    "foo".should.not.equal "bar"

The resulting file after the includes should be:

describe "Unit tests", ->
  describe "Test 1", ->
    it "Awesome test", ->
      "foo".should.not.equal "bar"

I don't know if this is possible, but would be a nice feature to have. At least for Coffeescript files, which takes into account the nesting.

Great tool! I'm a little curious if it is possible to have gulp-include fail, or at least notify me if the file isn't found. There is no way to verify if files were actually included aside from looking at the end result, which is not reliable.

I'm trying to run gulp-include on a plugins.js that has require statements for all my third-party JS used in my project. I get to the restangular.js line before I get the above error. It isn't specific to restangular because if I put anything after the first 14 requires it'll give me the invalid string error. If I only do the first 14 files it compiles fine.

Here is my gulp task:

gulp.task('js:vendor:app', function() {  
  return gulp.src(paths.src.plugins.app)    
    .pipe(include({
      extensions: 'js'
    }))
      .on('error', console.log)    
    .pipe(gulp.dest(paths.dest.scripts));    
});

Here is my plugin.js file:

// JQuery
//= require ../../../../vendor/bower/**/jquery.js
//= require ../../../../vendor/bower/**/jquery.placeholder.js
//= require ../../../../vendor/bower/**/jquery.easing.js
//= require ../../../../vendor/bower/**/jquery.serializejson.js
//= require ../../../../vendor/bower/**/lodash.js

// AngularJS
//= require ../../../../vendor/bower/**/angular.js
//= require ../../../../vendor/bower/**/angular-ui-router.js
//= require ../../../../vendor/bower/**/angular-scroll.js
//= require ../../../../vendor/bower/**/angular-animate.js
//= require ../../../../vendor/bower/**/angular-sanitize.js
//= require ../../../../vendor/bower/**/angular-aria.js
//= require ../../../../vendor/bower/**/angular-cookies.js
//= require ../../../../vendor/bower/**/angular-resource.js
//= require ../../../../vendor/bower/**/angular-easyfb.js
//= require ../../../../vendor/bower/**/restangular.js

// Angular-Strap
//= require ../../../../vendor/bower/**/angular-strap.js
//= require ../../../../vendor/bower/**/angular-strap.tpl.js

// UI Bootstrap
//= require ../../../../vendor/bower/**/ui-bootstrap-tpls.js

// Animation Framework Dependencies
// require vendor/bower/**/TweenMax.js
// require vendor/bower/**/jquery.gsap.js

// Fast Click Polyfill
//= require ../../../../vendor/bower/**/fastclick.js

// Moment JS
//= require ../../../../vendor/bower/**/moment.js
//= require ../../../../vendor/bower/**/angular-moment.js
//= require ../../../../vendor/bower/**/twix.js

// Mapbox JS
//= require ../../../../vendor/bower/**/mapbox.uncompressed.js
//= require ../../../../vendor/bower/arc/index.js

// Bootstrap JS
//= require ../../../../vendor/bower/**/affix.js
//= require ../../../../vendor/bower/**/alert.js
// require vendor/bower/**/button.js
//= require ../../../../vendor/bower/**/carousel.js
//= require ../../../../vendor/bower/**/collapse.js
//= require ../../../../vendor/bower/**/dropdown.js
//= require ../../../../vendor/bower/**/tab.js
//= require ../../../../vendor/bower/**/transition.js
//= require ../../../../vendor/bower/**/scrollspy.js
//= require ../../../../vendor/bower/**/modal.js
//= require ../../../../vendor/bower/**/tooltip.js
//= require ../../../../vendor/bower/**/popover.js

// deprecated in favor of angular-strap select
//= require ../../../../vendor/bower/**/bootstrap-multiselect.js

//= require ../../../../vendor/bower/**/bootstrap-tour.js

// Twitter Typeahead JS
//= require ../../../../vendor/bower/**/typeahead.bundle.js

// ZeroClipboard
//= require ../../../../vendor/bower/**/ZeroClipboard.js

// jqplot and plugins
//= require ../../../../vendor/bower/**/jquery.jqplot.js
//= require ../../../../vendor/bower/**/jqplot.canvasAxisTickRenderer.js
//= require ../../../../vendor/bower/**/jqplot.cursor.js
//= require ../../../../vendor/bower/**/jqplot.dateAxisRenderer.js
//= require ../../../../vendor/bower/**/jqplot.highlighter.js

// Analytics JS
//= require ../../../../vendor/bower/**/analytics.js

Hi!

Is it possible to compile every .coffee file before it is included?

Thank you!

Would be great if this could work with the codekit includes for compatibility! (https://incident57.com/codekit/help.html#javascript)

But it works a bit different, it can only append or prepend to the file and only once

// @codekit-prepend "someFile.js";
// @codekit-prepend "someFile.js", "../someOtherFile.js", "../scripts/thirdFile.js";

The're also used on many others software like codekit that support the same syntax (http://alphapixels.com/prepros/docs/js-concat-minify.html)

I am using windows system, and when I try to use gulp-include the following message shows up:

WARN: gulp-include - no files found matching D:\server\lib\assets\js/commom/**/*.js

Maybe using path normalize fix the problem...

Hi,

First i love your library, i use it in all my angular projects.

With the version 2.x it seems that arrays doesnt work anymore :

//=include ["*.js", "!app.js"] 

Can you confirm ? I would be sad...

When I use the plugin within Visual Studio 2015, it throws an error:

 node_modules\gulp-inject\src\inject\index.js:127
SyntaxError: Unexpected token ,

It seems that it doesn't like the unnamed items in the object on that line - when I went into the source and tried naming the properties, the error moved onto the next unnamed property.