Comments (7)
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.
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.
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.
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.
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.
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.
Yeah. No problem, thanks for your help! (you can close this issue)
from gulp-watch.
Related Issues (20)
- 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
- Security Issue with Gulpwatch, fsevents and Request for Chokidar Version 3 and Fsevents Version 2 Installation 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.