Is there a way to use gulp-clean such that instead of passing in the files or directories I want to delete, to delete everything that does not match a specific file name in the directory?
For example, If I have 3 files in directory "dir":
dir/a.js
dir/b.js
dir/c.js
Sample Pseudocode of what I want to do, (delete everything in /dir/ thats not a.js:
gulp.src('!./dir/a.js').pipe(clean());
This should work:
var gulp = require('gulp');
var del = require('del');
gulp.task('clean', function(cb) {
del(['dir/**/*', '!dir/a.js'], cb);
});
If the excluded file is in a sub directory you need to exclude that dir from deletion. For example:
del(['dir/**/*', '!dir/subdir', '!dir/subdir/a.js'], cb);
or:
del(['dir/**/*', '!dir/subdir{,/a.js}'], cb);
gulp-filter can be used to filter files from a gulp stream:
var gulp = require('gulp');
var filter = require('gulp-filter');
gulp.src('**/*.js')
.pipe(filter(['*', '!dir/a.js']))
.pipe(clean());
Related
I have the following gulp task that is currently not working.
gulp.task('emails', function() {
gulp.src('views/emails/src/**/*.html')
.pipe(inky())
.pipe(gulp.dest('views/emails/dist/'+debug()+"/html.ejs"));
});
I would like to iterate over the /views/emails/src/ directory, find all html files, then use inky to convert them to html, and then copy the resulting html file to...
views/emails/dist/'+ folderName +"/html.ejs
where folderName is the name of the .html file that was processed.
I need this in order to get the file structure in the format that the npm email-templates package requires.
That's a job for gulp-rename:
var rename = require('gulp-rename');
var path = require('path');
gulp.task('emails', function() {
gulp.src('views/emails/src/**/*.html')
.pipe(inky())
.pipe(rename(function(file) {
file.dirname = path.join(file.dirname, file.basename);
file.basename = 'html';
file.extname = '.ejs';
}))
.pipe(gulp.dest('views/emails/dist/'));
});
My project structure:
build
public
assets
css
app.css
vendor.css
js
app.js
vendor.js
index.html
src
assets
styles
main.styl
coffee
main.coffee
index.jade
I have a task to build a library of Bower in two files : vendor.css and vendor.js:
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var mainBowerFiles = require('gulp-main-bower-files');
var filter = require('gulp-filter');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
gulp.task('bower', ['clean'], function () {
var jsFilter = filter('**/*.js', { restore: true });
var cssFilter = filter('**/*.css', { restore: true });
return gulp.src('./bower.json')
.pipe(mainBowerFiles())
.pipe(cssFilter)
.pipe(concat('vendor.css'))
.pipe(minifyCss())
.pipe(gulp.dest(path.dist.css))
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest(path.dist.js))
.pipe(jsFilter.restore)
.pipe(connect.reload());
});
Here's my task on cleaning of temporary folders when you change files in the src folder:
var del = require('del');
...
gulp.task('clean', function () {
return del(['build', 'public/**', '!public/**/vendor.{js,css}']);
});
That must delete the build folder and all the contents of the public directory, except the vendor.css and vendor.js that are in the folder public/assets/css and public/assets/js.
This is done in order to not build a library of bower at each change of the file, because it takes 3-4 seconds (by the way, is this normal?), but only at the first start or change bower.json ( running separate watcher).
But somehow, the files vendor.js and vendor.css also removed. With gulp-tap I got a list of files:
List of files
What am i doing wrong?
According to https://github.com/sindresorhus/del#beware you need also exclude sub-directories, otherwise del will delete all.
So, you can use something like this:
del([.., 'public/**/*', '!public/{dir_1,dir_2}', '!test/**/vendor{.css,.js}']);
I want to filter just the files which include the directory ui-router somewhere in the middle of the path.
I have the following code:
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var debug = require('gulp-debug');
var gulpFilter = require('gulp-filter');
gulp.task('default',function() {
var bower_files = mainBowerFiles();
var js_filter = gulpFilter(['**/*.js']);
gulp.src(bower_files)
.pipe(js_filter)
.pipe(debug({title: 'unicorn:'}))
var js_filter = gulpFilter(['**/ui-router/**']);
gulp.src(bower_files)
.pipe(js_filter)
.pipe(debug({title: 'unicorn1:'}))
});
The output is:
[12:10:53] unicorn: bower_components\ngstorage\ngStorage.js
[12:10:53] unicorn: bower_components\ui-router\release\angular-ui-router.js
[12:10:53] unicorn: bower_components\x2js\xml2json.min.js [12:10:53]
unicorn1: 0 items
Meaning that ['**/*.js'] works to filter out all js files.
But ['**/ui-router/**'] does not work. What is problematic with this pattern?
I read the following doc https://github.com/isaacs/node-glob and i don't see why it should not work.
You can filter the result of main-bower-files:
var files = mainBowerFiles(/\/ui\-router\//);
After hacking with this a long time i found the issue.
In gulp-filter the vinyl file.relative property is sent.Comment from Sindre Sorhus
In our case the files are without globs(What i understand) and therefore we get just the name of the file without the directory.
The solution is to write instead of gulp.src(bower_files) gulp.src(bower_files,{base:__dirname})
Here we say gulp from where to start the relative file.
I am trying to copy a specific file src C:\Project\dir1\dirv-1.0.0\tools\file.exe to a specific directory dest C:\Project\dir2\ using gulp.
The version number in dirv-1.0.0 could change in the future, so I want to wildcard the version number.
Here is the task I have for that (gulpfile.js is in C:\Project):
gulp.task('copy', function(){
return gulp
.src('dir1\dirv-*\tools\file.exe')
.pipe(gulp.dest('dir2'));
});
This ends up generating the following dest file: C:\Project\dir2\dirv-1.0.0\tools\file.exe. What I want is C:\Project\dir2\file.exe.
How do I do this gulp copy task so that I can wildcard the src path but only copy file.exe to the dest path?
Use gulp-flatten
var gulp = require('gulp');
var flatten = require('gulp-flatten');
gulp.task('default', function(){
return gulp.src('./dir1/dirv-*1/test.txt')
.pipe(flatten())
.pipe(gulp.dest('dir2'));
});
I have a bunch of html files in a partials directory. Using gulp js, I want to minify and rename these files to .min.html. Please show me how to achieve this.
See here, using gulp-rename, if you just want to rename the files.
Something in the line of below should do:
var rename = require('gulp-rename');
gulp.src("./partials/**/*.hmtl")
.pipe(rename(function (path) {
path.suffix += ".min";
}))
.pipe(gulp.dest("./dist"));
In order to minify, you can use gulp-htmlmin. Pretty straightforward from the documentation:
var htmlmin = require('gulp-htmlmin');
gulp.task('compress', function() {
gulp.src('./partials/**/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('dist'))
});
You can certainly combine the two to obtain the desired effect.