执行gulp build:dist时遇语法错误，第三方CSS混入JS致压缩失败

数据老陈

2026-5-21

解决GulpUglifyError: unable to minify JavaScript（CSS混入JS文件）的问题

你遇到的问题根源很清晰：UglifyJS在压缩vendor.js时，遇到了不属于JavaScript语法的CSS代码，导致解析失败。错误提示里的Unexpected token: punc (.)，就是因为Uglify试图把.lf-ng-md-file-input { ... }这类CSS语法当成JS解析，这显然不符合JS的语法规范。

下面是具体的排查和解决步骤：

第一步：定位打包配置的问题
先去检查你的Gulp任务配置，找到负责生成vendor.js的任务。大概率是你在配置JS打包的src路径时，不小心把CSS文件也包含了进来——比如错误用了**/*而非**/*.js，或者路径覆盖到了CSS目录。举个错误配置的例子：
```
gulp.task('vendor-js', function() {
  return gulp.src(['node_modules/**/*.js', 'public/css/*.css']) // 这里意外包含了CSS文件
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/min'));
});
```

第二步：分离JS和CSS的打包流程
把JS和CSS的处理完全分开，用专门的插件处理各自的文件类型：

单独创建处理vendor JS的任务，只引入JS文件：

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

gulp.task('vendor-js', function() {
  return gulp.src(['node_modules/**/*.js']) // 仅选择JS文件
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/min'));
});

创建单独的vendor CSS处理任务，用CSS压缩插件（比如gulp-clean-css）处理：

const cleanCss = require('gulp-clean-css');

gulp.task('vendor-css', function() {
  return gulp.src(['node_modules/lf-ng-md-file-input/**/*.css']) // 精准定位第三方组件的CSS
    .pipe(concat('vendor.css'))
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css/min'));
});

更新build:dist任务，让它同时执行JS和CSS的打包：

gulp.task('build:dist', gulp.series('vendor-js', 'vendor-css', /* 其他业务代码打包任务 */));

第三步：临时修复已生成的vendor.js
在重新构建前，你可以先手动打开/Users/eladb/.../public/js/min/vendor.js，找到混入的CSS代码段（.lf-ng-md-file-input { ... }那部分）并删除，这样能临时让Uglify通过，但根本解决还是要靠修正打包配置。
第四步：检查第三方组件的引入方式
如果你用模块化方式（比如ES6 import）引入第三方组件，要确认有没有误把CSS文件当成JS导入。比如入口文件里写了import './lf-ng-md-file-input.css'，但没配置CSS加载器，就会导致CSS代码被直接插入到JS bundle里，最终引发Uglify的错误。这种情况要确保CSS文件被正确的加载器处理，或者直接在HTML里通过<link>标签引入CSS。

总结来说，核心问题就是打包流程错误地将CSS文件混入了JS bundle，只要把两者的处理分开，确保Uglify只处理纯JS文件，就能解决这个问题。

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