Subfolder in the project - using nude

[CesarDenis]

I need a little help 😊

In my project I need the following file structure:

webapp
└── app
    ├── index.html
    ├── accessible
    │   ├── index.html
    ├── includes
    │   ├── footer.html
    │   └── header.html
    └── layouts
        └── default.html

When I run the command gulp serve, it works.
But when I run gulp, the folder accessible is not created.

Can someone help me?

Best regards. 😄

[silvenon]

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'
])

[CesarDenis]

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?

[CesarDenis]

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)

[lukakemperle]

Same problem here: no browser refresh for .html in subfolders, even with app/**/*.html.

[silvenon]

@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.

[CesarDenis]

@silvenon see my gulpfile.babel.js

It seems that the error is in the plugin useref in task html

[silvenon]

@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.

[silvenon]

  gulp.watch([
    '.tmp/**/*.html',
    '.tmp/scripts/**/*.js',
    'app/images/**/*',
    '.tmp/fonts/**/*'
  ]).on('change', reload);

[CesarDenis]

@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 -->

[rizqinizamil]

I also have same problem. Do you have any solution regarding useref error for it?

[rizqinizamil]

This change worked for me;

return gulp.src(['app/*.html', '.tmp/*.html', '.tmp/**/*.html'])
    .pipe($.useref({searchPath: ['.tmp', 'app', '.', '']}))

I use Jade btw.

[neilhem]

@rizqinizamil you can shorten code a little bit:

return gulp.src(['app/*.html', '.tmp/**/*.html'])
    .pipe($.useref({searchPath: ['.tmp', 'app', '.', '']}))

[rizqinizamil]

@neilhem Yes, you are right. Thank you!

[rizqinizamil]

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?

[silvenon]

@rizqinizamil what is the difference between those two code blocks?

[rizqinizamil]

@silvenon Oops, sorry, my fault. I write it with sleepy eyes :|. Please check, I just edited it.

[silvenon]

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?

[rizqinizamil]

@silvenon Yes, you are right.

[silvenon]

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.

[savellem]

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.

[dainbrain]

[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:

1. 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'])

2. 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'
    ])

3. 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!

[illycz]

@dainbrain but your solution will not work if you need push your code to subfolder, am I right?