如何在Gulp项目中优雅集成自定义Modernizr构建？

别担心，我帮你搞定这个问题——用npm配合Gulp生成按需定制的Modernizr构建，比粘贴代码到main.js里清爽多了，步骤也很清晰：

1. 安装必要依赖 #

首先得装两个包：gulp-modernizr（Gulp插件，帮我们生成定制版）和modernizr（核心库），在项目根目录跑这条命令：

npm install --save-dev gulp-modernizr modernizr

2. 创建Modernizr配置文件 #

在项目根目录新建一个modernizr-config.json，这里面写死你需要的测试项和配置，完全按需定制。举个例子，如果你只需要flexbox、CSS Grid和ES6 Promise的检测，配置可以写成这样：

{
  "minify": true, // 生成压缩后的文件
  "options": [
    "setClasses" // 自动给html标签添加特性检测类，方便CSS做兼容
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/grid",
    "test/es6/promises"
  ]
}

你可以根据自己的需求，在feature-detects里添加或移除测试项，具体可选的检测项可以参考Modernizr官方文档里的对应路径。

3. 在Gulpfile里配置构建任务 #

接下来把Modernizr的构建集成到你的Gulp流程里。打开你的gulpfile.js，添加这段代码：

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

// 自定义Modernizr构建任务
gulp.task('modernizr', function() {
  // 可选：扫描你的CSS/JS源码，自动检测你用到的特性，结合配置文件生成最精简的构建
  return gulp.src(['./src/css/**/*.css', './src/js/**/*.js'])
    .pipe(modernizr({
      config: './modernizr-config.json', // 加载我们刚才写的配置文件
      devFile: false, // 不要用开发版的Modernizr
      outputFile: './dist/js/modernizr-custom.js' // 生成的定制文件存放路径
    }))
    .pipe(gulp.dest('.'));
});

// 把Modernizr任务集成到你的构建流程里，比如放在JS打包任务之前
gulp.task('build', gulp.series('modernizr', 'your-js-bundling-task'));

如果不想让插件自动扫描源码（比如你已经明确知道要哪些检测项），可以去掉gulp.src()那一行，完全依赖配置文件里的feature-detects就行。

4. 正确引入生成的Modernizr文件 #

这一步很关键——Modernizr需要先运行，才能给html标签添加对应的类，或者让你的JS代码里能访问到Modernizr对象做特性判断。之前你用import引入没触发测试，大概率是因为打包后Modernizr的代码执行顺序靠后，或者被tree-shaking误删了，单独引入就能完美解决这个问题。

在你的HTML里把生成的modernizr-custom.js放在main.js之前引入：

<script src="dist/js/modernizr-custom.js"></script>
<script src="dist/js/main.js"></script>

这样一来，你就拥有了一个完全按需定制的Modernizr构建，不用再手动粘贴代码，而且体积小、维护起来也方便~

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