UnderStrap（WordPress）自定义JS添加路径及配置确认

Great question! Let's break this down clearly since UnderStrap follows a specific asset workflow that's easy to nail once you know the pattern:

File Placement #

• Always put custom JS in src/js/ — the root js/ directory is for compiled output files, not your source code. UnderStrap uses Gulp to process assets from the src/ folder and spit them into root directories, so any changes you make directly in js/ will get overwritten the next time you run a Gulp build.
• For better organization, I recommend creating a subfolder like src/js/custom/ to keep your custom scripts separate from default UnderStrap/Bootstrap files.

Enqueuing via inc/enqueue.php #

• Yes, you need to enqueue your compiled custom JS file here. This is how WordPress loads scripts properly (avoids conflicts, handles dependencies, etc.). Here's a quick example:

  // Enqueue custom script
  wp_enqueue_script(
      'understrap-custom-js',
      get_template_directory_uri() . '/js/custom.js',
      array( 'jquery' ), // Dependencies (adjust based on your script's needs)
      wp_get_theme()->get( 'Version' ),
      true // Load in footer (best practice for page performance)
  );
  

• Important: Reference the compiled file in the root js/ directory, not the source file in src/js/.

Modifying gulpfile.js #

• You do need to update the Gulp config to include your custom JS files so they get compiled. Open gulpfile.js and locate the scripts task (or the src array for JS processing).
• Add your custom file path to the list. For example, if you have src/js/custom.js, update the JS source like this:

  const jsSources = [
      './src/js/bootstrap.bundle.min.js',
      './src/js/skip-link-focus-fix.js',
      './src/js/custom.js' // Add your custom file here
  ];
  

• If you're using a subfolder for custom scripts, use a glob pattern like ./src/js/custom/**/*.js to include all JS files in that directory.
• After updating, run gulp scripts (or gulp watch to auto-compile when you make changes) to generate the compiled file in the root js/ folder.

Are Your Proposed Steps Correct? #

• Short answer: Yes, you're completely on the right track! The key steps you identified (placing source JS in src/js/, enqueuing via inc/enqueue.php, updating gulpfile.js) align perfectly with UnderStrap's intended workflow. Just remember to always work in the src/ directory for source assets, let Gulp handle compilation, and enqueue the final output files.

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