I have a gulp-watch script that watches for changes in my image directory then process the images. The problem is that photoshop save for web is putting temp files in the directory and then renaming them very quickly, which trips up my image processing script. I would like to exclude them from the watch script.
The temp files are formatted as so moog-mftrem_tmp489245944
I would like to use the _tmp string to exclude, but not sure how to exclude characters in the middle of a file name. Here is what I have tried but doesn't seem to work:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*'], ['images']);
});
Thanks for any help!
While your temp files don't have extensions, glob paths don't know what to do if you don't specify one. It becomes merely a path to a folder, and indeed it doesn't find a folder name matching your glob.
Try:
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/*.png','!app/images/pedals/*_tmp*.*'], ['images']);
});
Note the extra: .* (period asterisk)
For completeness I like to add the recursive globstar /**/
i.e.
gulp.task('watch', function() {
gulp.watch(['app/images/pedals/**/*.png','!app/images/pedals/**/*_tmp*.*'], ['images']);
});
consider using 'gulp-filter' :
const gulp = require('gulp');
const filter = require('gulp-filter');
gulp.task('watch', function() {
gulp.watch('app/images/pedals/*.png', ['images']);
});
const f = filter(file => file.path.includes('tmp'));
gulp.task('images', function() {
return gulp.src('app/images/pedals/*.png')
.pipe(f)
.pipe(gulp.dest('./build'))
});
Related
do I understand this wrong or is something not right here?
I have this piece of code
gulp.task("minifyScripts", function () {
return gulp.src("assets/scripts/*.js")
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('assets/scripts/min'))
.pipe(rev.manifest())
.pipe(revDel())
.pipe(gulp.dest('assets/scripts'))
.pipe(livereload())
.pipe(browserSync.stream());
});
My understanding was that this should remove old .js file when one with new hash is created, but its not...
Do you have any idea? Thanks so much!
You need to specify either dest in the options, or base in the manifest options—unless you're writing everything to the root directory.
Try:
pipe(revDel({dest: "assets/scripts/min"})
Seems that rev-del has a number of users, including myself, who are unable to get the plug-in to delete the old static files after gulp-rev hashes them.
Switching over to gulp-rev-delete-original simply worked OOB.
In the OP's use case, the updated solution would be:
const revDel = require("gulp-rev-delete-original")
gulp.task("minifyScripts", function () {
return gulp.src("assets/scripts/*.js")
.pipe(uglify())
.pipe(rev())
.pipe(revDel()) // call just after rev()
.pipe(gulp.dest('assets/scripts/min'))
.pipe(rev.manifest())
//.pipe(revDel()) ==> move to just after rev()
.pipe(gulp.dest('assets/scripts'))
.pipe(livereload())
.pipe(browserSync.stream());
});
I have a gulp task to move fonts:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This working however the my-package number will change. Im trying to alter the gulp task so that it will still work when the package number changes:
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#*/fonts/*')
.pipe(gulp.dest('./build/fonts/'));
});
This does move the fonts but it also adds some folders.
This is what it does:
./build/fonts/my-package#1.0.17-alpha.3/fonts/ (fonts here)
What I need is this:
./build/fonts/ (fonts here)
Ive fixed this with gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('move', function(cb) {
return gulp.src('./packages/my-package#1.0.17-alpha.3/fonts/*')
.pipe(flatten())
.pipe(gulp.dest('./build/fonts/'));
});
https://www.npmjs.com/package/gulp-flatten
I have a gulp task to uglify my JS:
gulp.task('uglify', ['eslint'], () => {
return gulp.src(jsDest + '/*.js')
.pipe(rename({suffix: '.min'}))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
It works fine, but as I am using a wildcard to identify JS files, I end up with new files named name.min.min.js rather than existing minified files being overwritten.
A work around I have come up with is to have an additional task which cleans out these files before I uglify again:
gulp.task('cleanUglified', () => {
return del.sync('dist/js/*.min.js');
});
gulp.task('uglify', ['cleanUglified', 'eslint'], () => {
...
});
While this works fine, I'm sure there must be a way to have my task ignore anything named *.min* and in fact overwrite any that already exist.
Solved - I can ignore the already minified files and overwrite them by using this pattern to select the files to uglify:
return gulp.src(jsDest + '/*[^.min].js')
EDIT
Following the below comments, I have updated to:
return gulp.src(['*.js', '!*.min.js'])
I have a gulp task which uses gulp-imagemin to compress images. When I add new files to this directory I'd like for this task to compress them as well. I read that gulp.watch doesn't trigger on new files and that I should try gulp-watch so I used it like so;
gulp.task('images', function() {
watch({glob: './source/images/*'}, function (files) {
return files
.pipe(plumber())
.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
});
This works the same as gulp.watch on the first run, but when I add a new image to the directory nothing happens. If I overwrite an existing file however, it DOES run the task again, so it does behave differently.
The documentation on gulp-watch called this "Batch Mode" and said I could also run the task on a per-file basis, so I tried this way too;
gulp.task('images', function() {
gulp.src('./source/images/*')
.pipe(watch())
.pipe(plumber())
.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
But nothing changed. Why isn't adding files to my image directory triggering the task?
Adding an extra argument {cwd:'./'} in gulp.watch worked for me:
gulp.watch('src/js/**/*.js',{cwd:'./'},['scripts']);
2 things to get this working:
1 Avoid ./ in the file/folder patterns
2 Ensure ./ in the value for cwd
Good Luck.
Ref:- https://stackoverflow.com/a/34346524/4742733
Most likely such kind of questions are redirected to gaze package and its internal processes, that runs complicated watching procedures on your OS. In this case you should pass images/**/* to glob option, so gaze will watch all (including new) files in images directory:
var gulp = require('gulp');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
watch({glob: 'images/**/*'}, function (files) {
files.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
});
But this fill not fix case, when you have empty images directory. If you want to watch them, pass ['images', 'images/**/*'] to glob, and it will watch directory, that initially empty.
P.s. also you dont need gulp-plumber in this case, because watch will rerun function, that uses imagemin every time, even when imagemin pops an error.
In my gulp.js file I'm streaming all HTML files from the examples folder into the build folder.
To create the gulp task is not difficult:
var gulp = require('gulp');
gulp.task('examples', function() {
return gulp.src('./examples/*.html')
.pipe(gulp.dest('./build'));
});
But I can't figure out how retrieve the file names found (and processed) in the task, or I can't find the right plugin.
I'm not sure how you want to use the file names, but one of these should help:
If you just want to see the names, you can use something like gulp-debug, which lists the details of the vinyl file. Insert this anywhere you want a list, like so:
var gulp = require('gulp'),
debug = require('gulp-debug');
gulp.task('examples', function() {
return gulp.src('./examples/*.html')
.pipe(debug())
.pipe(gulp.dest('./build'));
});
Another option is gulp-filelog, which I haven't used, but sounds similar (it might be a bit cleaner).
Another options is gulp-filesize, which outputs both the file and it's size.
If you want more control, you can use something like gulp-tap, which lets you provide your own function and look at the files in the pipe.
I found this plugin to be doing what I was expecting: gulp-using
Simple usage example: Search all files in project with .jsx extension
gulp.task('reactify', function(){
gulp.src(['../**/*.jsx'])
.pipe(using({}));
....
});
Output:
[gulp] Using gulpfile /app/build/gulpfile.js
[gulp] Starting 'reactify'...
[gulp] Finished 'reactify' after 2.92 ms
[gulp] Using file /app/staging/web/content/view/logon.jsx
[gulp] Using file /app/staging/web/content/view/components/rauth.jsx
Here is another simple way.
var es, log, logFile;
es = require('event-stream');
log = require('gulp-util').log;
logFile = function(es) {
return es.map(function(file, cb) {
log(file.path);
return cb(null, file);
});
};
gulp.task("do", function() {
return gulp.src('./examples/*.html')
.pipe(logFile(es))
.pipe(gulp.dest('./build'));
});
You can use the gulp-filenames module to get the array of paths.
You can even group them by namespaces:
var filenames = require("gulp-filenames");
gulp.src("./src/*.coffee")
.pipe(filenames("coffeescript"))
.pipe(gulp.dest("./dist"));
gulp.src("./src/*.js")
.pipe(filenames("javascript"))
.pipe(gulp.dest("./dist"));
filenames.get("coffeescript") // ["a.coffee","b.coffee"]
// Do Something With it
For my case gulp-ignore was perfect.
As option you may pass a function there:
function condition(file) {
// do whatever with file.path
// return boolean true if needed to exclude file
}
And the task would look like this:
var gulpIgnore = require('gulp-ignore');
gulp.task('task', function() {
gulp.src('./**/*.js')
.pipe(gulpIgnore.exclude(condition))
.pipe(gulp.dest('./dist/'));
});
If you want to use #OverZealous' answer (https://stackoverflow.com/a/21806974/1019307) in Typescript, you need to import instead of require:
import * as debug from 'gulp-debug';
...
return gulp.src('./examples/*.html')
.pipe(debug({title: 'example src:'}))
.pipe(gulp.dest('./build'));
(I also added a title).