Open CesarDenis opened 8 years ago
Depends on your templating configuration, I'm not sure what you're using. You could try changing this in html
task:
return gulp.src('app/*.html')
to this:
return gulp.src(['app/*.html', 'app/accessible/*.html'])
or to include all HTML files except those in includes
and layouts
:
return gulp.src([
'app/**/*.html',
'!app/includes/**/*.html',
'!app/layouts/**/*.html'
])
My html
task:
return gulp.src(['app/*.html', '.tmp/*.html'])
then I change:
return gulp.src([
'app/**/*.html',
'.tmp/**/*.html',
'!.tmp/includes/**/*.html',
'!.tmp/layouts/**/*.html',
'!app/includes/**/*.html',
'!app/layouts/**/*.html'
])
That's right, or have a simpler way to do?
Hi @silvenon, I changed the gulpfile.babel.js
, and now with the following error:
events.js:154
throw er; // Unhandled 'error' event
^
Error: Error: File not found with singular glob: /Users/macweb01/Sites/ccr/ras/styles/main.css
at DestroyableTransform.<anonymous> (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/lib/streamManager.js:90:36)
at emitOne (events.js:95:20)
at DestroyableTransform.emit (events.js:182:7)
at emitOne (events.js:90:13)
at DestroyableTransform.emit (events.js:182:7)
at Glob.<anonymous> (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/index.js:38:16)
at Glob.g (events.js:273:16)
at emitOne (events.js:90:13)
at Glob.emit (events.js:182:7)
at Glob._finish (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:172:8)
at done (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:159:12)
at Glob._processSimple2 (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:652:12)
at /Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:640:10
at Glob._stat2 (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:736:12)
at lstatcb_ (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:728:12)
at RES (/Users/macweb01/Sites/ccr/ras/node_modules/inflight/inflight.js:23:14)
Same problem here: no browser refresh for .html in subfolders, even with app/**/*.html
.
@CesarDenis could you share the whole gulpfile.babel.js
? It will be much easier to help once I see what templating solution is used.
@artoric
gulp.watch([
- 'app/*.html',
+ 'app/**/*.html',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
However, some paths might break in nested HTML files, you should probably start convert them to /
paths.
@silvenon see my gulpfile.babel.js
It seems that the error is in the plugin useref
in task html
@CesarDenis only watch .tmp/**/*.html
for reloading in the serve
task, not app/**/*.html
as well. You want the browser to refresh once the Nunjucks templates have already been compiled. Also, you put .tmp/*.html
instead of .tmp/**/*.html
, the former goes only one level deep.
gulp.watch([
'.tmp/**/*.html',
'.tmp/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
@silvenon, the error is in default
task. Where it generates the final files.
When the html
task will generate the subfolder files it displays error:
[09:15:08] Finished 'views' after 10 s
[09:15:08] Starting 'html'...
events.js:154
throw er; // Unhandled 'error' event
^
Error: Error: File not found with singular glob: /Users/macweb01/Sites/ccr/ras/styles/main.css
at DestroyableTransform.<anonymous> (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/lib/streamManager.js:90:36)
at emitOne (events.js:95:20)
at DestroyableTransform.emit (events.js:182:7)
at emitOne (events.js:90:13)
at DestroyableTransform.emit (events.js:182:7)
at Glob.<anonymous> (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/index.js:38:16)
at Glob.g (events.js:273:16)
at emitOne (events.js:90:13)
at Glob.emit (events.js:182:7)
at Glob._finish (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:172:8)
at done (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:159:12)
at Glob._processSimple2 (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:652:12)
at /Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:640:10
at Glob._stat2 (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:736:12)
at lstatcb_ (/Users/macweb01/Sites/ccr/ras/node_modules/gulp-useref/node_modules/glob-stream/node_modules/glob/glob.js:728:12)
at RES (/Users/macweb01/Sites/ccr/ras/node_modules/inflight/inflight.js:23:14)
It seems that the error is in the plugin useref
.
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
To be able to generate the files necessary to change the layout:
This:
<!-- build:css ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
For this:
<!-- build:css ../styles/main.css -->
<link rel="stylesheet" href="/app/styles/main.css">
<!-- endbuild -->
I also have same problem. Do you have any solution regarding useref
error for it?
This change worked for me;
return gulp.src(['app/*.html', '.tmp/*.html', '.tmp/**/*.html'])
.pipe($.useref({searchPath: ['.tmp', 'app', '.', '']}))
I use Jade btw.
@rizqinizamil you can shorten code a little bit:
return gulp.src(['app/*.html', '.tmp/**/*.html'])
.pipe($.useref({searchPath: ['.tmp', 'app', '.', '']}))
@neilhem Yes, you are right. Thank you!
Actually I still have a problem. gulp html
works for now, but gulp serve
works with 404 error on css/js assets, because I set the url into this;
// build:css ../styles/main.min.css
link(rel='stylesheet' href='app/styles/main.css')
// endbuild
gulp serve
works fine when I change it into
// build:css ../styles/main.min.css
link(rel='stylesheet' href='../styles/main.css')
// endbuild
but got error File not found with singular glob:
when I run gulp html
.
Any idea?
@rizqinizamil what is the difference between those two code blocks?
@silvenon Oops, sorry, my fault. I write it with sleepy eyes :|. Please check, I just edited it.
Ok, this seems to be a tricky problem. Correct me if I'm wrong, but the way I understand it is that if you have files at different directory levels extending the same layout with the same useref blocks, assets won't be served/built correctly because they are relative to the HTML files, which exist on different levels.
Right?
@silvenon Yes, you are right.
This generator is meant more for single page apps, that's why it doesn't support nesting like this. I'll see what I can do, but it will take me some time. If you want, you can create a demo repo with this use case and link it here (let's use Nunjucks), so we can open PRs with our proposed solutions.
I added mine with the following.
Added this just below the extras script in the gulp file
gulp.task('copy', () => { return gulp.src(['app/**/*']).pipe(gulp.dest('dist')); })
Then changed this guy to add my copy script
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras', 'copy'], () => { return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); });
Then I made sure all the directories in my subdirectory html linkage is correct and it seems to work for now.
[EDIT] I'm dumb and didn't realize the build comments in html actually mattered. Here's how I got my subfolders to work in a basic webapp + nunjucks setup
I followed the steps in the Nunjucks recipe linked from generator-webapp.
I've done all the changes listed in that recipe first, and then I decided to try using subdirectories.
Here's what I did in my gulpfile.js that's different from the recipe:
In my views
task include all .njk
files but exclude app/layouts
and app/includes
.
return gulp.src(['app/**/*.njk','!app/includes/**/*.njk','!app/layouts/**/*.njk'])
In my html
task do the same, also including/excluding the .tmp
directory based on @CesarDenis and @silvenon comments above.
return gulp.src([
'app/**/*.html',
'.tmp/**/*.html',
'!.tmp/includes/**/*.html',
'!.tmp/layouts/**/*.html',
'!app/includes/**/*.html',
'!app/layouts/**/*.html'
])
It seemed to work, but the paths for the css/js were still relative, so I changing link paths in the default template for all the links including the build comments. (example):
<!-- build:css /styles/main.css -->
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->
Now I can create additional child pages in subdirectories like @CesarDenis had in his first comment.
gulp
works
gulp serve
works
gulp build
works
gulp serve:dist
works
Thanks for the help in this thread!
@dainbrain but your solution will not work if you need push your code to subfolder, am I right?
I need a little help :blush:
In my project I need the following file structure:
When I run the command
gulp serve
, it works. But when I rungulp
, the folderaccessible
is not created.Can someone help me?
Best regards. :smile: