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?

[yuvashrikarunakaran]

The issue you're experiencing is likely related to how the build process is configured in your gulpfile.js for handling folders and files inside your webapp/app/accessible directory. The gulp task probably isn't configured to copy everything from your app directory (like the accessible folder and its files) into the dist folder when running the production build.

Here’s how you can ensure that the accessible folder and its contents are correctly handled during the build process.

Update Gulp Task for HTML Files: Modify your existing html task to ensure it processes all html files, including those in the accessible folder. Add a glob pattern to ensure files from subdirectories are included.

In your gulpfile.js, the task for handling HTML files may look something like this:

js
Copy code
function html() {
return gulp.src('app//*.html') // This includes all HTML files in the app folder and its subfolders.
.pipe($.useref({ searchPath: ['.tmp', 'app', '.'] }))
.pipe($.if(/.js$/, $.uglify())) // Minify JS files
.pipe($.if(/.css$/, $.cssnano({ safe: true, autoprefixer: false }))) // Minify CSS
.pipe($.if(/.html$/, $.htmlmin({ // Minify HTML
collapseWhitespace: true,
minifyCSS: true,
minifyJS: { compress: { drop_console: true } },
processConditionalComments: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
})))
.pipe(gulp.dest('dist')); // Ensure it goes into the dist folder
}
The app//*.html pattern ensures that Gulp processes all html files in subdirectories like accessible, includes, and layouts.

Include Static Files Task: You may need a separate task to copy over static files (e.g., non-HTML files) into the dist directory. Here’s how you can do that:

js
Copy code
function extras() {
return gulp.src([
'app//*', // Include all files
'!app//*.html' // Exclude HTML files since they are handled separately
], {
dot: true
}).pipe(gulp.dest('dist'));
}
This task ensures that all files from the app folder (including accessible and its contents) are copied into the dist folder, except the HTML files, which are handled by the html task.

Ensure Folder Creation: Make sure you have tasks that create the required folder structure. You can explicitly copy directories using Gulp like this:

js
Copy code
gulp.task('copy-accessible', function () {
return gulp.src('app/accessible/**/*') // All files in accessible folder
.pipe(gulp.dest('dist/accessible')); // Copy them to the dist folder
});
Add Tasks to Build Sequence: If you want to make sure the accessible folder and others are included in the final build, you need to ensure all relevant tasks are included in the build task. Update it like this:

js
Copy code
const build = gulp.series(clean, gulp.parallel(html, extras, 'copy-accessible'));
This ensures that the accessible folder and its contents are processed and copied to the dist directory during the build.