Code Monkey home page Code Monkey logo

Comments (8)

demisx avatar demisx commented on August 18, 2024

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.

floatdrop avatar floatdrop commented on August 18, 2024

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.

demisx avatar demisx commented on August 18, 2024

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.

floatdrop avatar floatdrop commented on August 18, 2024

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.

demisx avatar demisx commented on August 18, 2024

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.

floatdrop avatar floatdrop commented on August 18, 2024

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.

demisx avatar demisx commented on August 18, 2024

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.

floatdrop avatar floatdrop commented on August 18, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.