In gulp I want to deal with some files but I do not know all of the files I want to deal with at the time I write gulp.src([...]). I can only know some files at that time and other files I want to deal with depend on the known files dependencies. My question is is there a way that can add the source file in the middle of pipe? Pseudo code:
gulp.src([some files I already knew]).pipe(gp_tap(function(file){
// some actions;
// get file dependencies
// Here I want to add the dependencies as the source file
}))
Related
I am using gulp 4 to process various css, js and mjml files which are triggered using gulp.watch to process files on save and everything is working in terms of that specific file being processed on save. What I have not been able to get working is having a save trigger processing of different files than the file that was saved.
Scenario: I have mjml files in a src/templates directory. Those file have mj-include tags which import files from src/templates/includes directory. When I save a file in the src/template/includes directory, I want gulp to process all the src/templates/*.mjml files. This way any change to a child file will trigger processing of all possible parent files to ensure the change is incorporated.
All of my doc reading and googling hasn't turned up solution.
var paths = {
mjmlincludes: ["src/templates/*.mjml"],
mjmlincludeswatch: ["src/templates/includes/*.mjml"],
mjmlincludesoutput: "src/templates/html/",
};
function mjmlincludesconvert() {
return gulp.src(paths.mjmlincludes).pipe(mjml()).pipe(gulp.dest(paths.mjmlincludesoutput));
}
function watchFiles() {
gulp.watch(paths.mjmlincludeswatch, mjmlincludesconvert);
}
const watch = gulp.parallel(watchFiles);
I am using PhpStorm. I'm having problem with 2 file watchers.
.min files does not get updated on save in .less file.
I need first to compile Less to CSS and then to minify that same file.
.min files does not get updated on save in .less file
Use Output paths to refresh for that -- the IDE will check such path(s) looking for changes after current File Watcher finished running.
https://www.jetbrains.com/help/phpstorm/using-file-watchers.html#transpilerBehaviour
I need first to compile Less to CSS and then to minify that same file.
Use 2 file watchers: second one will run after the first one (so it needs to be located after/below the first one).
So I have:
First watcher will take main.scss and compile into main.css (using node-sass) and placed next to the source file.
Second will run after that on main.css and will make main.min.css using CSSO CSS Optimizer.
The File Watchers:
(please ignore disabled ones: this is quite old test project; it keeps all the stuff from the past experiments)
SCSS Watcher (using node-sass):
CSSO CSS Optimizer watcher:
Please note that I'm using custom scope: this is to limit these watchers to those specific folders only (it's test project after all; it has tons of experiments).
Here is the recording/proof that it works just fine: all 3 files are opened and get refreshed automatically by IDE: I only hit the Save button that triggers File Watchers.
A folder structure just in case:
Maybe the title is a bit strange, but I can't seem to find anything about on google.
Question: I have a folder that only contains .ts files and .json files.. Typescript compiles the .ts files and puts it into a separate directory (not as a bundle, just the directory structure 'as-is').
Src /
Workers /
[ModuleA.ts, ModuleA.json],
[ModuleB.ts, ModuleB.json],
[MobuleC.ts, ModuleC.json]
Most of the time I can just require('*.json') and the JSON file will be also placed in to build directory.
But now I have a situation, where importing the JSON will make no sense, because the JSON file gets updated every few seconds and I read the file with fs.readFile('*.json'), so I also don't want it floating around in the v8 cache (through require)
So how do I 'include' a JSON/None-Typescript file into the build, that is not explicitly being importing by either require or import?
For now I just used gulp to copy every .json file in the src folder over to the the respective dist/** folder.
But still find it strange typescript doesn't have something included for it..
Maybe you should checkout --resolveJsonModule, it's a newer feature of typescript.
Example usage:
Task: Using gulp-inject to inject js/**/*.js files into index.html.
Problem: If I watch for changes in the js/**/*.js glob, this would mean that I'm running the inject task each time any of the .js files' content is changed, which is unnecessary, since the paths don't change.
Question: How can I create a watcher that would only watch for addition/removal of the files in the glob?
Thanks!
You can give watch a callback function that gets the file object, including the type of event:
add - file was added to watch or created
change - file was changed
unlink - file was deleted
see https://www.npmjs.com/package/gulp-watch
I currently use gulp for most of my automation tasks. To keep the process optimised I check for file changes before processing the file. The problem is that when I rebuild my files and only a single file in the set has changed, the concat file only includes the changed file. Is there a way to pickup all the files in case of concat
gulp.task('myScripts', function() {
return gulp.src(['public/js/one.js','public/js/two.js'], {base: 'public/js'})
.pipe(changed('public/dist/original/js'))
.pipe(gulp.dest('public/dist/original/js'))
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('public/dist/js'));
});
I am using gulp-changed to check for file changes, Here are the scenarios:
When running it for the first time, it takes both the miles and minifies them.
When only one file is changed after that, the concatenated file 'all.min.js' only contains the minified version of the changed file.
Can anyone please help me with how I can concat all the files even if only one file changes?
You should require gulp-remember and call it before concat. Gulp-remember works with gulp-changed and restores the previous changed files into the stream.
Have a look to this official recipe: Incremental rebuilding, including operating on full file sets