Consider this task:
gulp.task("WatchDirectoryForAllFileChanges", function () {
gulp.watch("Build/**/*",
function (event) {
console.log("event", event);
});
});
When I add or remove individual files in the Build directory I get events as expected. But when I delete a directory containing files I get no events at all for the removal of the files within that directory.
Is there an explanation for this behavior, and is it possible to handle it properly? I'd think directory deletion like this is a common enough scenario to motivate some befuddlement here.
While this is not an answer why gulp behaves like this, I found chokidar which handles this stuff correctly:
var chokidar = require("chokidar");
gulp.task("Watch", function () {
return chokidar.watch("Build/**", { ignoreInitial: true })
.on("all", function (event, path) {
console.log(event, path);
});
});
Related
QUESTION PART 1: OUTPUTTING TO A NESTED DYNAMIC FOLDER
I use Gulp.js for graphic email development. My employer is switching to a different marketing platform which requires our email templates to be in a different folder structure. I'm having trouble outputting to nested folders when gulp.src uses globbing. I'd appreciate your help!
Here is a simplified example the gulp.src folder:
build/template1/template1.html
build/template2/template2.html
build/template3/template4.html
build/template4/template4.html
Here is a simplified example the gulp.src folder:
build/template1/theme/html/template1.html
build/template2/theme/html/template2.html
build/template3/theme/html/template4.html
build/template4/theme/html/template4.html
I want to do something like a wildcard for the dynamic template folders ...
gulp.task('moveFile', function(){
return gulp.src('./build/*/*.html')
.pipe(gulp.dest('./build/*/theme/html'));
});
... But globbing only works in the gulp.src. How can I output to a dynamic folder when using a globbed gulp.src? the closest I can get is putting the /theme folder at the same level as the template folders, not inside each as desired.
Thank you for your help!
QUESTION PART 2: OUTPUTTING A *RENAMED FILE* TO A NESTED DYNAMIC FOLDER
Mark's answered my question (Thanks #Mark!), but I over-simplified my use case so I'm adding a Part 2.
In addition to nesting the file, I need to rename it. (I had this part working originally, but can't get the 2 parts to work together.) Referring to the gulp-rename documentation, I made 3 different attempts. It's so close but I'd appreciate a little more help. :-)
// ATTEMPT 1: Using gulp-rename mutating function method
gulp.task('createTwig', function(){
return gulp.src('./build/*/*.html')
.pipe(rename(
function (path) {
path.basename = "email";
path.extname = ".html.twig";
},
function (file) {
console.log(file.dirname);
file.dirname = nodePath.join(file.dirname, 'theme/html');
}
))
.pipe(gulp.dest('./build/'));
});
// ATTEMPT 2: Using gulp-rename fixed object method
gulp.task('createTwig', function(){
return gulp.src('./build/*/*.html', { base: process.cwd() })
.pipe(rename(
{
basename: "email",
extname: ".html.twig"
},
function (file) {
console.log(file.dirname);
file.dirname = nodePath.join(file.dirname, 'theme/html');
}
))
.pipe(gulp.dest('./build/'));
});
// ATTEMPT 3: Using gulp-rename mutating function method
gulp.task('createTwig', function(){
return gulp.src('./build/*/*.html')
.pipe(rename(
function (path, file) {
path.basename = "email";
path.extname = ".html.twig";
console.log(file.dirname);
file.dirname = nodePath.join(file.dirname, 'theme/html');
}
))
.pipe(gulp.dest('./build/'));
});
This works:
const rename = require("gulp-rename");
const path = require("path");
gulp.task('moveFile', function(){
return gulp.src(['build/**/*.html'])
.pipe(rename(function (file) {
console.log(file.dirname);
file.dirname = path.join(file.dirname, 'theme/html');
}))
.pipe(gulp.dest('build')) // build/template1/theme/html
});
I tried a few ways, including trying the base option and gulp-flatten and using a function in gulp.dest but this was the easiest.
Question Part #2:
gulp.task('createTwig', function(){
return gulp.src(['build/**/*.html'])
.pipe(rename(function (file) {
file.basename = "email";
file.extname = ".html.twig";
file.dirname = path.join(file.dirname, 'theme/html');
}))
.pipe(gulp.dest('build')) // build/template1/theme/html
});
path.basename/extname are just "getters", you cannot set those values.
I want to delete all folders and subfolders inside of a given directory if they only contain folders and no files. Is there an easy way to do that?
What I found until now:
https://www.npmjs.com/package/gulp-recursive-folder
https://www.npmjs.com/package/gulp-count
https://www.npmjs.com/package/gulp-path
You can use delete-empty:
gulp.task('delete-empty-directories', function() {
deleteEmpty.sync('foo/');
});
This recursively deletes all empty folders below foo/.
Here's a rough start, so you'll just need to loop for recursion I guess.
var modules = {
gulp : require('gulp'),
fs : require('fs'),
path : require('path'),
del : require('del'),
map : require('map-stream')
};
modules.gulp.task('folder-delete', function() {
// get folder list inside of the dir passed in
function getFolders(dir) {
return modules.fs.readdirSync(dir)
.filter(function(file) {
return modules.fs.statSync(modules.path.join(dir, file)).isDirectory();
});
}
var dir = '../src/', // (update with your path to the root folder)
folders = getFolders(dir),
hasFile = 0;
var folderMap = folders.map(function(folder) {
hasFile = 0; // reset for each folder
return modules.gulp.src(dir + folder + '/**/*')
.pipe(modules.map(function(file, cb) {
hasFile = 1;
cb(null, file);
}))
.on('end', function() {
console.log(hasFile, ' - ', folder);
if (!hasFile) {
modules.del([dir + folder], { force: true }).then(function() {
console.log('Deleted ' + dir + folder);
});
}
})
});
return folderMap;
});
Basically, this is setting the directory at ../src/, getting the folders at the root of that dir, then runs the src under those directories. It then uses map to see if there was a file added to the stream, then updates a variable if so. After the task finishes and if the variable has not been updated, then it will delete the folder.
As stated above, you could probably just loop through the directories for the recursion (or you could use one of the plugins you've mentioned).
The accepted solution, which uses the delete-empty package, doesn't work for me (and for others too). Plus, the creator seems to have stopped maintaining the package (last update 3 years ago).
What works just fine, and probably is much more future save, is a combination of sync-exec and the OS find command.
const syncExec = require("sync-exec")
syncExec("find sample/directory/ -type d -empty -delete")
So I'm trying to create a gulp workflow and I'd like to implement options for some tasks, like gulp copy-images --changed. Now, I've created a watch task that obviously watches all image files and it should start the copy-images with the --changed flag.
Ideally, I want to do something like this:
gulp.task('copy-images', function(){
// some code
});
gulp.task('watch', function(){
gulp.watch(config.images, ['copy-images --changed']);
});
I'm also very aware that I could do:
gulp.task('copy-images', function(){
// some code
});
gulp.task('copy-images-changed', function(){
// some code
});
gulp.task('watch', function(){
gulp.watch(config.images, ['copy-images']);
});
but this means duplicate code.
Anyone with a solution or maybe some advice?
Thanks in advance!
Gulp does not provide a built-in way of specifying options for tasks. You have to use an external options parser module like yargs. See this question for more on that topic.
This also means that passing something like ['copy-images --changed'] to gulp.watch() will not work. The entire string will just be interpreted as a task name.
The best approach for you would be to factor out the code of your task into a function and then call this function from both your task and your watch:
var argv = require('yargs').argv;
function copyImages(opts) {
if (opts.changed) {
// some code
} else {
// some other code
}
}
gulp.task('copy-images', function() {
copyImages(argv);
});
gulp.task('watch', function(){
gulp.watch(config.images, function() {
copyImages({changed:true});
});
});
The above should cover all of your bases:
gulp copy-images will execute //some other code.
gulp copy-images --changed will execute //some code.
gulp watch will execute //some code any time a watched file is changed.
I have a Gulp task that uses glob-stream to recursively loop through directories and files to perform a task, similar to below, but far more elaborate:
var gs = require('glob-stream');
var config = {
PATH: 'some/path/*.*'
}
function doSomething(filePath) {
var stream = gs.create(filePath);
// Do something
return gs.on('data', doSomething);
}
gulp.task('compile', function() {
var filePath = config.PATH;
return doSomething(filePath);
});
I can have the task achieve the results and compile what I need, but unfortunately Gulp believes the task has finished while it's still running, causing issues in my build process - How can I avoid this? I'm already using run-sequence but to no effect.
Why are you manually walking the directory tree with a recursive function? Why not just let glob-stream do the work for you? Then you only have to take care of the //Do something part:
var config = {
PATH: 'some/path/**' //glob pattern for all subfolder and files
};
function doSomething(filePath) {
//Do something
}
gulp.task('compile', function() {
var stream = gs.create(config.PATH);
stream.on('data', doSomething);
return stream;
});
gulp.task('secondTask', function() {
console.log('secondTask');
});
gulp.task('default', function() {
runSequence('compile', 'secondTask');
});
The some/path/** glob pattern creates a stream of all folders and files below some/path/, so you don't have to implement the recursive tree walk yourself.
Note that the compile task returns the stream. Otherwise gulp can't tell when the compile task has completed and starts running secondTask before compile has finished.
New to Gulp. My default task is using the pluginrun-sequence which tells task deleteBuild to run, then makeBuild.
Randomly, I am getting an ENOENT error which seems to be telling me that I'm either referencing files that don't exist for deletion or copy. My tasks are:
deleteBuild:
gulp.task('deleteBuild', function(done) {
var del = require('del');
del(['build/**/*'], done);
});
makeBuild:
gulp.task('makeBuild', function() {
var stream = gulp.src(['src/**/*'], { base: 'src/' })
.pipe(gulp.dest('build/');
});
Can someone inform me as to how to best address this issue? I'm hoping to seek a low-level understanding rather than to be shown a solution w/o an explanation. Thanks.
Aside: I tried the deleteBuild without a callback function as well, under the assumption that, as is, it would perform the deletion and only continue to the next task once it is complete, though this doesn't seem to be what is happening.
That's probably because the deleteBuild does not return a gulp stream and thus leave the pipe broken. I would propose the following:
gulp.task('deleteBuild', function() {
var del = require('del');
var vinylPaths = require('vinyl-paths');
return gulp.src(['build']) // no need for glob, just delete the build directory
.pipe(vinylPaths(del));
});
gulp.task('makeBuild', function() {
var stream = gulp.src(['src/**/*'], { base: 'src/' })
.pipe(gulp.dest('build/');
});
gulp.task('default', function(cb) {
var runSequence = require('run-sequence');
runSequence('deleteBuild', ['makeBuild'], cb);
});
These tasks will first delete the build directory before executing the makeBuild task.
You'll need to install one additional plugin:
npm install vinyl-paths
For a ready to use example, please take a look a the gulpfile of skeletonSPA. This works for me ;-)