Comments (8)
Something like this seems to work, but not sure if this is the best approach to do it:
gulp.task('default', function() {
watch({ glob: 'app/**/*.scss' }, function() {
gulp.run('sass');
});
watch({ glob: 'app/**/*.js' }, function() {
gulp.run('clean');
gulp.run('jshint');
gulp.run('app-js-minify');
});
});
from gulp-watch.
One approach is implement same API, that bundled watch uses - make gulp.watch
accept array of tasks, yet this approach forces you to ignore files, that have been changed and just run task. But in this case you could just use gulp.watch
.
You could look inside gulp - it's calling this.start to launch tasks, so you can do that, instead of using deprecated run
method.
I hope this humble thoughts help you some how.
from gulp-watch.
Thank you @floatdrop. This gulp builder I have to say is amazing!
I've replaced gulp.run()
with gulp.start()
and everything ran OK. However, I've run into a livereload issue. Currently, I have my watch
tasks organized this way right now:
gulp.task('coffee', function() {
gulp.src(filePath.coffee.src)
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(gulp.dest(filePath.coffee.dest));
});
gulp.task('sass', function() {
gulp.src(filePath.sass.src)
.pipe(sass())
.pipe(gulp.dest(filePath.sass.dest))
});
gulp.task('html', function() {
var opts = { };
gulp.src(filePath.html.src)
.pipe(gulp.dest(filePath.html.dest));
});
gulp.task('watch-html', function(){
watch({ glob: filePath.html.src }, function() {
gulp.start('html');
}).pipe(livereload());
});
gulp.task('watch-coffee', function(){
watch({ glob: filePath.coffee.src }, function() {
gulp.start('coffee');
}).pipe(livereload());
});
gulp.task('watch-sass', function(){
watch({ glob: filePath.sass.src }, function() {
gulp.start('sass');
}).pipe(livereload());;
});
gulp.task('watch', ['watch-html', 'watch-sass', 'watch-coffee']);
The livereload works properly with html files only. When I change sass or coffee files, it reloads the page, but I don't see any changes until I manually reload the page myself. It feels like livereload() kicks in before the coffee or sass tasks had enough time to complete. But it works OK so far with html task (maybe cause this task is much faster?).
What would be the proper way to force livereload to start only when the gulp.start() task has been completed? I want it to be the very last event in the watch chain. Thank you.
from gulp-watch.
I think it's because you trying to launch 3 livereload servers at once. Look at example in gulp-livereload - you should create server once by var server = livereload();
and then call server.changed(file.path);
to trigger reload.
I don't test it, but this is one way to do it:
var server = livereload();
gulp.task('coffee', function() {
gulp.src(filePath.coffee.src)
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(gulp.dest(filePath.coffee.dest))
.pipe(server);
});
gulp.task('sass', function() {
gulp.src(filePath.sass.src)
.pipe(sass())
.pipe(gulp.dest(filePath.sass.dest))
.pipe(server);
});
gulp.task('html', function() {
var opts = { };
gulp.src(filePath.html.src)
.pipe(gulp.dest(filePath.html.dest))
.pipe(server);
});
gulp.task('watch-html', function(){
watch({ glob: filePath.html.src }, function() {
gulp.start('html');
});
});
gulp.task('watch-coffee', function(){
watch({ glob: filePath.coffee.src }, function() {
gulp.start('coffee');
});
});
gulp.task('watch-sass', function(){
watch({ glob: filePath.sass.src }, function() {
gulp.start('sass');
});
});
gulp.task('watch', ['watch-html', 'watch-sass', 'watch-coffee']);
from gulp-watch.
Thank you. I've followed the example as such:
var server = livereload();
gulp.task('sass', function() {
gulp.src(filePath.sass.src)
.pipe(sass())
.pipe(gulp.dest(filePath.sass.dest));
.pipe(server);
});
gulp.task('watch-sass', function(){
watch({ glob: filePath.sass.src }, function(files) {
gulp.start('sass');
}).on('change', function(file) {
server.changed(file.path);
});
});
But now running watch-sass
generates this error when I update a sass file:
[dmoore (master)]$ gulp watch-sass
[gulp] Using gulpfile /Users/dmoore/projects/tutorials/angular-phonecat2/gulpfile.js
[gulp] Live reload server listening on: 35729
[gulp] Starting 'watch-sass'...
[gulp] Finished 'watch-sass' after 47 ms
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 6.47 ms
[gulp] phone_detail.scss was changed
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 1.09 ms
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: write after end
at writeAfterEnd (_stream_writable.js:133:12)
at Transform.Writable.write (_stream_writable.js:181:5)
at Stream.ondata (stream.js:51:26)
at Stream.EventEmitter.emit (events.js:95:17)
at queueData (/Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:43:21)
at next (/Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:71:7)
at /Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:85:7
at done (/Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp/node_modules/vinyl-fs/lib/dest/writeContents.js:7:5)
at /Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp-watch/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:105:5
at /Users/dmoore/projects/tutorials/angular-phonecat2/node_modules/gulp/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:105:5
at Object.oncomplete (fs.js:107:15)
from gulp-watch.
I think there is misunderstanding about gulp-watch
and gulp.watch
. This module (gulp-watch
) is not equivalent bundled gulp.watch
function and example in gulp-livereload
is using bundled watch. So you can switch to bundled one, since you don't need per-file rebuilding:
var server = livereload();
gulp.task('sass', function() {
gulp.src(filePath.sass.src)
.pipe(sass())
.pipe(gulp.dest(filePath.sass.dest));
});
gulp.task('watch-sass', function(){
gulp.watch(filePath.sass.src, ['sass']);
gulp.watch(filePath.sass.dest).on('change', function(file) {
server.changed(file.path);
});
});
from gulp-watch.
Yeah, tbh I'm a little confused how gulp-watch
is different from gulp.watch
and where use one vs. other. I was able to get what I needed with this (see below). Please let me know if you see any issues with the code and thank you so much for your help. Learning gulp has been a great pleasure.
var server = livereload();
gulp.task('sass', function() {
gulp.src(filePath.sass.src)
.pipe(changed(filePath.sass.dest))
.pipe(sass())
.pipe(gulp.dest(filePath.sass.dest));
});
gulp.task('watch-sass', function() {
gulp.watch(filePath.sass.src).on('change', function(file) {
gulp.start('sass');
server.changed(file.path);
});
});
from gulp-watch.
As readme says:
This is implementation of gulp.watch with endless stream approach. If gulp.watch is working for you - stick with it, otherwise you can try gulp-watch plugin.
Only issue with your code is server is triggered on src
file change, but it can be, that sass will not catch up with server and browser will reload before dest
file is written (but I don't get changed(filePath.sass.dest)
call, so may be it fix this case).
Have fun with gulp - it's great!
from gulp-watch.
Related Issues (20)
- Update anymatch version in package.json HOT 4
- Watched unexpected filepath
- Watched unexpected filepath
- Watched unexpected filepath
- Watched unexpected filepath
- subfolders no longer updating the main style.scss file
- Watched unexpected filepath
- How to deal with changed files? HOT 2
- watch is not working correctly
- chokidar version 3 HOT 4
- Watched unexpected filepath
- Watched unexpected filepath HOT 1
- please publish the latest version to npm
- chokidar version is too low
- Watched unexpected filepath
- Watched unexpected filepath HOT 1
- Watched unexpected filepath
- Watched unexpected filepath
- Watched unexpected filepath
- Watched unexpected filepath HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-watch.