I want to delete any files named .DS_Store anywhere in a directory Gulp helps to build. However, Gulp does not pass all the files through it's own pipe, so I don't think I can do clever things with vinyl here. Rather, most of the files are generated via a static site generator that Gulp calls with child_process.
The problem is, this static site generator does not have a parameter to skip these sorts of files when it encounters them in source directories; it will just blindly carry them over. I don't want these files, so I'd like to have Gulp remove them anywhere they're found.
I tried e.g. del(['output/**/.DS_Store'], cb);, but that didn't work. Any ideas?
Update: After discovering I need something fancier than del, I tried to use glob to solve this, but I must be doing it wrongly:
const glob = require('glob');
const del = require('del');
gulp.task('build', function(cb) {
exec('pelican', function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
glob('output/**/.DS_Store', function(err, files) {
files.forEach( function(file) {
del([file]);
});
});
});
Update 2: No files are deleted as a result of the glob, however, I do note that if I insert console.log(file);, the expected files are output. So perhaps I'm on the right track, but doing something wrong with del...
Turns out I was causing my own problem by combining the exec block with the glob statement. It worked once I made these separate tasks and had the task build call pelican for the exec block and rmkjunk for the glob statement.
It's worth noting this created a new problem of needing sequential vs. parallel tasks to be run, which this SO answer addresses. Hope this helps some future confused person.
Related
I recently installed gulp 4 [from 3.9.1] and I'm having an issue getting my globs to work as they used to.
I have a whole directory [less some other sub-directories and files] that I want to transfer.
Here's the relevant code:
var path_in_str = 'my_input_dir/';
var path_out_str = 'my_output_dir/';
return gulp.src([path_in_str+'**', path_in_str+'.*', '!'+path_in_str+'node_modules', '!'+path_in_str+'node_modules/**', '!'+path_in_str+'*.json'], {dot: true})
.pipe(gulp.dest(path_out_str));
Basically, I'm trying to prevent the node_modules folder from being transferred, and I also want to prevent all .json files in the home folder from being transferred as well.
What is happening is that the node_modules directory only [no content] is being transferred. Also, all the .json files are being transferred.
How can I tweak this to fix for Gulp 4's way of handling globs [as it appears to have changed slightly]?
I couldn't get this to work with native gulp, so I thought I'd try the node glob package, and this option seems to work best for the use-case.
First you would need to install it like so:
npm install glob --save-dev
Then reference it in your gulp gile:
var gp_glob = require('glob');
And finally, use it as the glob filter:
var input_list_arr = gp_glob.sync(path_in_str+'**', {ignore: [path_in_str+'node_modules/**', path_in_str+'*.json'], dot: true});
return gulp.src(input_list_arr, {base: path_in_str})
.pipe(gulp.dest(path_out_str));
Take note that we're using the ignore option instead of ! notation to filter the file/directory paths. Also note that the base option is specified when passing the filtered list into gulp.src.
This worked for me as intended. Hope it helps.
I am attempting to concat a few javascript files as part of my gulp build. I am following the "documentation" as much as possible, but there aren't many answers there. Here are the commands I am using.
gulp.task('concatMe', function ()
{
console.log('I am in the concat function.');
return gulp.src(['/app/core/threejs/*.js'])
.pipe(concat('new.js'))
.pipe(gulp.dest('./dist/'));
});
I would think that this takes all of the javascript files in the folder targeted and concatenates them in the new.js file at the desired directory.
While the console log works, nothing is actually done.
How do I know if it found the files I want?
How should the base URL be specified?
How should the destination URL be specified?
Does the destination file and folder need to already exist or will the code create it?
Thanks
In your gulp file, have you included the below line?
var plugin = require("gulp-load-plugins")();
Then you need to modify your code to:
return gulp.src(['/app/core/threejs/*.js'])
.pipe(plugin.concat('new.js'))
.pipe(gulp.dest('./dist/'));
Hope this helps
I'm trying to come up with a gulp task that generates new source maps whenever its corresponding .js file has changed, this is what I have so far:
gulp.task('maps', [ 'compile:ts' ], function () {
return gulp.src([
'app/**/*.js'
])
.pipe(newer({ dest: 'app', ext: '.js.map' }))
.pipe(print(function (filepath) {
return 'Creating source map for ' + filepath + '...';
}))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./'))
.pipe(print(function (filepath) {
return 'Writing source map for ' + filepath + '...';
}))
.pipe(checkout())
.pipe(gulp.dest('app'))
;
});
Now two weird things happen:
gulp-newer returns all .js files, it doesn't matter if they were changed or not (regarding the timestamps of the .map.js files).
gulp-sourcemaps emits both, the .js and the .js.map file.
Can anyone provide a hint what I'm missing here?
gulp-sourcemaps emits both, the .js and the .js.map file.
That's to be expected, because that's how source maps work. Each .js file contains a sourceMappingURL comment that points to the .js.map file so your browser knows where to find it.
You can leave this out by using the addComment option:
.pipe(sourcemaps.write('./'), {addComment:false})
Of course, that means your HTTP server has to send a X-SourceMap header for each .js file.
gulp-newer returns all .js files, it doesn't matter if they were changed or not (regarding the timestamps of the .map.js files).
This might be caused by gulp-sourcemaps emitting both a .js and a .js.map file, effectively overwriting your existing .js file. Using the same source and destination directories is generally a bad idea, so using a different dest directory would solve this problem.
(It might also be caused by the checkout() pipe, but you didn't describe what that does. I'd try removing this and see if it works.)
However I don't think any of the above really matters, since your general approach and the way you're using gulp-sourcemaps is likely to be completely wrong. I assume you want sourcemaps from your original .ts files to your compiled .js files. In that case you need to use it in your compile:ts task. The way you're using it now will just produce an empty source map file.
I'm new to gulp and I tried to follow the documentation in https://www.npmjs.com/package/gulp-newer to understand how it works. However its not working as expected for the below task. I think I'm missing something obvious.
Here's the folder structure,
temp
file1.js
file2.js
new
file1.js
file3.js
change
<empty initially>
I want to compare temp folder with new folder and if there are any new files in new folder(which was not present in temp earlier) then move those files to change folder. This is just me trying to understand how gulp-newer works. Am I doing it right?
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(gulp.dest('change'))
});
However when I run this task it just copy all the files in temp folder to change folder. So after task run change folder has file1.js and file2.js. I'm expecting just file3.js to be present in change(since that's a new file). Correct me if my understanding with the approach is incorrect.
From gulp-newer:
Using newer with many:1 source:dest mappings Plugins like gulp-concat
take many source files and generate a single destination file. In this
case, the newer stream will pass through all source files if any one
of them is newer than the destination file. The newer plugin is
configured with the destination file path.
and the sample code:
var gulp = require('gulp');
var newer = require('gulp-newer');
var concat = require('gulp-concat');
// Concatenate all if any are newer
gulp.task('concat', function() {
// Add the newer pipe to pass through all sources if any are newer
return gulp.src('lib/*.js')
.pipe(newer('dist/all.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});
it seems that you need to pass in all the files already concatenated to newer. In your case:
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(concat('*.js'))
.pipe(gulp.dest('change'))
});
Also, since newer checks the files modified date make sure that the files are actually newer. I know it's obvious, but I'm usually stuck on "obvious" stuff.
May I also suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});