Giter Site home page Giter Site logo

Comments (7)

floatdrop avatar floatdrop commented on August 17, 2024

Could you add gulp-debug for verbose output? Like so:

gulp = require("gulp");
watch = require("gulp-watch");
debug = require("gulp-debug");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  gulp.src("src/**/*.html")
      .pipe(debug())
      .pipe(watch())
      .pipe(debug())
      .pipe(templateCache({ standalone: true })) // => templates.js.
      .pipe(gulp.dest("build/src"));
});

from gulp-watch.

lukehorvat avatar lukehorvat commented on August 17, 2024

Sure, here ya go:

[gulp] Using gulpfile ~/code/test1/gulpfile.js
[gulp] Starting 'templates'...
[gulp] Finished 'templates' after 6.87 ms
[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/app.html
contents: <!DOCTYPE html>
<html ng-app="app" ng-co...

[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/app.html
contents: <!DOCTYPE html>
<html ng-app="app" ng-co...

[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/index.html
contents: <h1>things.index</h1>
<table style="bord...

[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/show.html
contents: <h1>things.show</h1>
<pre>{{ thing | jso...

[gulp] gulp-debug: end event fired (2014-05-03 10:00:42 UTC)
[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/index.html
contents: <h1>things.index</h1>
<table style="bord...

[gulp] gulp-debug: (2014-05-03 10:00:42 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/show.html
contents: <h1>things.show</h1>
<pre>{{ thing | jso...

[gulp] 3 files was added from pipe

And if I comment out .pipe(watch()), it's just this:

[gulp] Using gulpfile ~/code/test1/gulpfile.js
[gulp] Starting 'templates'...
[gulp] Finished 'templates' after 5.12 ms
[gulp] gulp-debug: (2014-05-03 10:02:05 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/app.html
contents: <!DOCTYPE html>
<html ng-app="app" ng-co...

[gulp] gulp-debug: (2014-05-03 10:02:05 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/index.html
contents: <h1>things.index</h1>
<table style="bord...

[gulp] gulp-debug: (2014-05-03 10:02:05 UTC)

File
cwd:      ~/code/test1
base:     ~/code/test1/src/
path:     ~/code/test1/src/things/show.html
contents: <h1>things.show</h1>
<pre>{{ thing | jso...

[gulp] gulp-debug: end event fired (2014-05-03 10:02:05 UTC)

from gulp-watch.

lukehorvat avatar lukehorvat commented on August 17, 2024

Hmmm okay, so this seems to work:

gulp = require("gulp");
watch = require("gulp-watch");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  gulp.src("src/**/*.html")
      .pipe(watch({}, ["poo"]))
});

gulp.task("poo", function() {
  gulp.src("src/**/*.html")
      .pipe(templateCache({ standalone: true }))
      .pipe(gulp.dest("build/src"));
});

Do you know why this is?

I don't like the fact that I have to break it into two tasks. :(

from gulp-watch.

floatdrop avatar floatdrop commented on August 17, 2024

I think this is caused by gulp-concat that used inside gulp-angular-templatecache - it listens for end event and concatenates all buffers on this event. gulp-watch in stream mode is never fires end event, but you can use batching mode:

gulp = require("gulp");
watch = require("gulp-watch");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  gulp.src("src/**/*.html").pipe(watch({ emit: 'all' }, function (stream) {
    stream.pipe(templateCache({ standalone: true }))
      .pipe(gulp.dest("build/src"))
  }))
});

This will run templateCache on all files that being watched. If you want to watch new files, then you can add glob option to watch:

gulp = require("gulp");
watch = require("gulp-watch");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  watch({ glob: 'src/**/*.html', emit: 'all' }, function (stream) {
    stream.pipe(templateCache({ standalone: true }))
      .pipe(gulp.dest("build/src"))
  })
});

from gulp-watch.

lukehorvat avatar lukehorvat commented on August 17, 2024

Thanks! I'd really like to use the glob + callback function approach you demonstrate there. But I need to run a task immediately after the templates.js file is re-generated. With the watch function callback I lose the ability to specify an array of tasks to execute...

I suppose I could do it like this:

gulp = require("gulp");
watch = require("gulp-watch");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  watch({ glob: "src/**/*.html", emit: "all" }, function (stream) {
    stream.pipe(templateCache({ standalone: true }))
          .pipe(gulp.dest("build/src"))
          .on("end", function() {
            gulp.start("after");
          });
  })
});

gulp.task("after", function() {
  console.log("Hi.");
});

But is there a better way?

It would be kinda nice if you could specify a callback function and an array of tasks to execute, but maybe that's overkill...

from gulp-watch.

floatdrop avatar floatdrop commented on August 17, 2024

I think splitting those tasks would be better - easier to understand and maintain.

It would be kinda nice if you could specify a callback function and an array of tasks to execute, but maybe that's overkill...

I would like it too, but it will take too much time to implement (because you will need to inject custom functions in orchestrator start API method).

from gulp-watch.

lukehorvat avatar lukehorvat commented on August 17, 2024

Yeah. No problem, thanks for your help! (you can close this issue)

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.