Gulp dist构建优化问题：自定义JS未合并至scripts.js

Hey there, I feel your pain—having to manually add code after every build is such a frustrating waste of time. Let’s walk through the most common fixes for this issue:

1. Double-Check Your Gulp Scripts Task File Sources #

First, make sure your custom initialization JS is actually included in the list of files your Gulp task processes. If you’re using gulp-concat to bundle scripts, your task should look something like this:

const gulp = require('gulp');
const concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src([
    // Include vendor scripts first (if needed)
    './src/js/vendor/*.js',
    // Add YOUR custom init file here—path must be accurate!
    './src/js/custom-init.js',
    // Any other project scripts
    './src/js/**/*.js'
  ])
  .pipe(concat('scripts.js'))
  .pipe(gulp.dest('./dist/js/'));
});

If your custom file is missing from the gulp.src() array, Gulp will never pick it up. Also, watch out for typos in the file path—even a single wrong character can cause Gulp to skip the file silently.

2. Verify Build Block Comments (If Using gulp-useref) #

If you’re using gulp-useref to bundle scripts directly from your HTML, ensure your custom init script is wrapped inside the correct build comments. Your HTML should have:

<!-- build:js js/scripts.js -->
<script src="./src/js/vendor/jquery.js"></script>
<script src="./src/js/custom-init.js"></script> <!-- This line must be inside the build block! -->
<script src="./src/js/main.js"></script>
<!-- endbuild -->

Scripts outside the <!-- build:js --> and <!-- endbuild --> tags won’t be merged into the final scripts.js file.

3. Confirm Task Dependencies in Your Build Task #

Make sure your build task explicitly depends on your scripts task. If it doesn’t, the script bundling step might not run at all during a build:

gulp.task('build', ['scripts', 'styles', 'html'], function() {
  // Additional build steps (like minification, cleanup) go here
});

Without listing scripts as a dependency, Gulp might run the build task without processing your JS files.

4. Debug Which Files Are Being Processed #

If you’re still stuck, add a debug plugin to see exactly which files Gulp is picking up. Install gulp-debug first:

npm install gulp-debug --save-dev

Then update your scripts task:

const debug = require('gulp-debug');

gulp.task('scripts', function() {
  return gulp.src([/* Your file list */])
    .pipe(debug({title: 'Processing JS Files:'}))
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./dist/js/'));
});

When you run gulp build, check the console output—your custom init file should appear in the list. If it doesn’t, your path is incorrect or the file doesn’t exist where you think it does.

5. Check for Silent Errors #

Sometimes Gulp will fail silently if a plugin throws an error. Run gulp build with the --verbose flag to see detailed logs:

gulp build --verbose

Look for any error messages related to missing files or plugin failures—this can point you straight to the issue.

Give these steps a try, and you should be able to get that custom init code merging automatically in no time!

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