I'm using this Gulp Watch sample: https://github.com/floatdrop/gulp-watch/blob/master/docs/readme.md#starting-tasks-on-events.
var gulp = require('gulp');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
gulp.task('build', function () { console.log('Working!'); });
gulp.task('watch', function () {
watch('**/*.js', batch(function () {
gulp.start('build');
}));
});
When I run it on my Windows 8 machine, it only runs the first time I change a file:
C:\test>gulp watch
[08:40:21] Using gulpfile C:\test\gulpfile.js
[08:40:21] Starting 'watch'...
[08:40:21] Finished 'watch' after 2.69 ms
[08:40:31] Starting 'build'...
Working!
[08:40:31] Finished 'build' after 261 µs
Next time nothing happens. Why?
For me it was adding a "return" to the task:
gulp.task('styles', function(){
return gulp.src('css/styles.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'));
});
If you read the documentation closely, you see the following phrase:
You can pass plain callback, that will be called on every event or wrap it in gulp-batch to run it once
So, that's basically the deal with gulp-batch. To constantly watch it, just remove the batch call:
gulp.task('build', function (done) {
console.log('Working!');
done();
});
gulp.task('watch', function () {
watch('app/*.js', function () {
gulp.start('build');
});
});
(and add the 'done' callback to build to let Gulp know when you're finished).
Btw... I'm not sure, but I think gulp-watch is meant to not only watch files, but also directly returning a vinyl object. So actually using the built-in gulp.watch should have the same effect:
gulp.task('watch', function () {
gulp.watch('app/**/*.js', ['build']);
});
This appears to be known issue
I had the same problem and used the same as ddprrt. The difference was using directory glob (wildcard) as apposed to absolute path.
I changed this:
gulp.task('watch', function() {
gulp.watch('sass/shortcutcss/*.scss', ['sass'])
});
to this:
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['sass'])
});
This problem made me crazy for a weekend. I tried all:
Add done()-Event
Rename/Touch/Clear target CSS
Be more specific with the filepaths
But the (reason for this problem and) the solution was so easy that I felt pathetic after that:
Just update your nodejs installation, mine was 0.12.x! No wonder that this doesn't worked.
After that the watch event works again. Sometimes it goes wrong again, too. But in this cases just save your file a second time and it get recognized. (I think foundation/gulp watch checks for changes to fast and while your file get replaced with the new uploaded one)
Long story:
For me it did not work for long time. All seems to be set right but run only once.
But suddenly I started with parcel js on another project and same thing happened with their builtn watch. So I looked for the answer and I found out that problem was with my Vim settings.
Answer what helped me is this one from #acobster https://stackoverflow.com/a/55435197/2686510
In short:
Update .vimrc by adding set backupcopy=yes
Related
I am having some difficulty trying to watch files and beautify at the same time each time the file is saved (manually). I just upgraded to Gulp 4. With Gulp 3 I didn't have any problem applying this logic, if I am not wrong the watch task callback didn't consider a change to run the watch again in an infinite loop.
How should I achieve this in the same file?
function beautify_js(){
return gulp
.src('js/*.js')
.pipe(beautify())
.pipe(gulp.dest('js/'));
}
gulp.task('watch', function() {
gulp.watch('js/*.js', beautify_js);
});
Assuming you already have the beautify_js task, here's how to give a set of callbacks to gulp-watch, which works both for gulp v3 and v4-alpha.
gulp.task("watch", function() {
gulp.watch("js/*.js", ["beautify_js", "another_task"]);
});
I have a gulpfile in which is a watch task, below
gulp.task('watch', function() {
gulp.watch('template/slick/assets/less/*.less', ['less']); // Watch all the .less files, then run the less task
});
This then invokes a less compile to css of that directory and moves it to a /css/ folder.
I then have 2 other tasks already scripted up to min, concat and move these .css files to a dist folder.
What I need to know is that when my watch invoked less task completes can I notify/run the stylesmin, cssconcats tasks? I do need to add more code to do it. I can't see to find a decent notify/end style way of doing things.
Here's the less task which is invoked by watch
gulp.task('less', function () {
return gulp.src('game/http/template/slick/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('game/http/template/slick/assets/css/'))
.pipe(notify({message: 'Less compiled'}));
});
You can define your tasks as dependencies of each other with [] syntax like below. (I'm assuming you are using something like connect to start up a server before you start watching the files)
gulp.task('less', function() {
console.log('less');
})
gulp.task('stylesmin', ['less'], function() {
console.log('stylesmin');
})
gulp.task('cssconcats', ['stylesmin'], function() {
console.log('cssconcats');
})
gulp.task('test', ['connect', 'watch']);
Modify your watch to kick off the last task, cssconcats and gulp will run the dependencies first
gulp.task('watch', function() {
gulp.watch('template/slick/assets/less/*.less', ['cssconcats']); // Watch all the .less files, then run the less task
});
Change any .less file and the output shows that the tasks are run correctly in this order;
less, stylesmin, cssconcats
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.
I am using Gulp for watch and sass complier. When I start "watch" first time then "sass" complier runs and its create the css files as per given path. However when I change the .scss files then it doesn't call "sass" complier again. Following is is my these two tasks and variables.
gulp.task('sass', function () {
gulp.src(config.sassPath)
.pipe(sass())
.pipe(gulp.dest(config.cssPath))
.pipe(livereload());
});
gulp.task('watch', false, function () {
livereload.listen(8189);
gulp.src(config.watchPaths)
.pipe(watch(config.watchPaths, function (event) {
gulp.start( 'sass', 'js-hint', 'server','test');
livereload();
}))
.pipe(livereload());
});
Following command i use to run "watch" task
gulp watch
I do see "watch" is reloading when I am changing the .scss file. Following is log for this.
[19:49:30] public/sass/html-controls.scss was changed
[19:49:30] /Users/dkuma204/Desktop/Dilip/Projects/OPEN/SourceCode/AWF/OPENApp/application/public/sass/html-controls.scss reloaded.
Not sure what I am missing here. Please help.
Why it is so complicated? Try this:
gulp.task('watch', false, function () {
livereload.listen(8189);
gulp.watch(config.watchPaths,['sass', 'js-hint', 'server', 'test'])
});
And your every task which requires livereload should have .pipe(livereload()) at the end.
You shouldn't use gulp start. Here is one of comment from github discussion:
gulp.start is undocumented on purpose because it can lead to
complicated build files and we don't want people using it
I have a very minimal gulpfile as follows, with a watch task registered:
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("lint", function() {
gulp.src("app/assets/**/*.js")
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
gulp.task('watch', function() {
gulp.watch("app/assets/**/*.js", ["lint"]);
});
I cannot get the watch task to run continuously. As soon as I run gulp watch, it terminates immediately.
I've cleared my npm cache, reinstalled dependencies etc, but no dice.
$ gulp watch
[gulp] Using gulpfile gulpfile.js
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 23 ms
It's not exiting, per se, it's running the task synchronously.
You need to return the stream from the lint task, otherwise gulp doesn't know when that task has completed.
gulp.task("lint", function() {
return gulp.src("./src/*.js")
^^^^^^
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
Also, you might not want to use gulp.watch and a task for this sort of watch. It probably makes more sense to use the gulp-watch plugin so you can only process changed files, sort of like this:
var watch = require('gulp-watch');
gulp.task('watch', function() {
watch({glob: "app/assets/**/*.js"})
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
This task will not only lint when a file changes, but also any new files that are added will be linted as well.
To add to OverZealous' answer which is correct.
gulp.watch now allows you to pass a string array as the callback so you can have two separate tasks. For example, hint:watch and 'hint'.
You can then do something like the following.
gulp.task('hint', function(event){
return gulp.src(sources.hint)
.pipe(plumber())
.pipe(hint())
.pipe(jshint.reporter("default"));
})
gulp.task('hint:watch', function(event) {
gulp.watch(sources.hint, ['hint']);
})
This is only an example though and ideally you'd define this to run on say a concatted dist file.