基于Yo Generator+PUG的项目转npm后，gulp-useref忽略node_modules依赖

Hey there, let's get your gulp html task to recognize those npm-managed libraries you switched to. The core issue here is that your useref plugin's search path doesn't include the node_modules directory—so it can't locate and bundle those packages. Here's how to fix it step by step:

1. Update the Useref Search Path #

First, modify your useref configuration to add node_modules to its list of search paths. This tells the plugin to look in that directory when resolving your script/style references.

Here's the adjusted task code:

gulp.task('html', ['views', 'styles', 'scripts'], () => { 
  return gulp.src([ 
    'tmp/**/*.html', 
    'app/**/*.html', 
    '!app/layouts/**/*' 
  ]) 
  // Add 'node_modules' to the searchPath array
  .pipe($.useref({searchPath: [paths.tmp, paths.src, '.', 'node_modules']})) 
  .pipe($.if(/\.js$/, $.uglify({ compress: {drop_console: true} }))) 
  .pipe($.if(/\.css$/, $.csso())) // Assuming you were using csso for CSS minification
  // Add your remaining pipe steps (like outputting to dist) here
});

2. Double-Check Your PUG/HTML Reference Paths #

Make sure your script/style references in PUG/HTML point to the correct locations within node_modules. Since we added node_modules to the search path, you don't need to prefix references with node_modules/—useref will automatically look there.

For example, in your PUG files:

// build:js scripts/vendor.js
script(src='jquery/dist/jquery.min.js')
script(src='bootstrap/dist/js/bootstrap.min.js')
// endbuild

Useref will now resolve these paths by checking the node_modules directory first (alongside your other search paths).

3. Troubleshooting Tips #

• If you still see missing libraries, verify the actual path of the npm package—some packages have different directory structures than their Bower counterparts (e.g., some use lib instead of dist).
• Run gulp html with verbose logging (add --verbose if your gulp setup supports it) to see which files useref is trying to locate—this can help spot path mismatches.
• Ensure you've installed all required packages via npm install (no typos in package names!).

内容的提问来源于stack exchange，提问作者Macomatic