Comments (13)
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.
from gulp-include.
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);
from gulp-include.
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!
from gulp-include.
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.
from gulp-include.
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.
from gulp-include.
I'm looking for the same thing as I update to Gulp4. Please let me know if you've found something!
from gulp-include.
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.
from gulp-include.
@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.
from gulp-include.
@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.
from gulp-include.
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.
from gulp-include.
@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.
from gulp-include.
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.
from gulp-include.
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.
from gulp-include.
Related Issues (20)
- Ability to control syntax HOT 2
- Error preventing run HOT 2
- Pre and post processing
- Variables not scoped properly HOT 3
- gulp-include and eslint and proper line numbers? HOT 1
- processInclude processes output file indefinitely (or until the stack explodes) HOT 1
- Require Behaviour HOT 2
- Compile before include
- Gulp include breaks the code on windows system HOT 1
- Add "include-if-exists" functionality
- how do I to insert file conten inside quotation marks? HOT 2
- Replace deprecated dependency gulp-util HOT 1
- Independent require in several files HOT 5
- Possibly remove/lock event-stream HOT 1
- gulp-util removal request HOT 2
- When multiple files are matched, it includes both of them. HOT 7
- TypeError: resultMap.eachMapping is not a function HOT 5
- Question about src/js/main.js
- Any way to use sourcemaps and minification of files?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-include.