如何通过Gulp正确引入NPM安装的CSS&JS文件至index.html？

我来帮你理清这两种方案的差异和适合场景，以及行业内的标准做法：

方案1：直接在index.html里引用node_modules内的文件 #

这种方式非常直接，上手快：

• 你只需要在index.html里写出完整路径就行，代码长这样：

<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

• 好处是零配置，不用折腾Gulp，适合开发初期快速搭环境、调试功能。
• 但缺点也很明显：生产环境部署时，你几乎不会把整个node_modules目录传到服务器（体积太大且没必要），这时候页面就会找不到这些资源，出现404错误；另外如果以后Materialize的目录结构更新，你还得手动改路径，维护起来麻烦。

方案2：通过Gulp把资源复制到dist目录（生产环境必用的标准方案） #

这是前端工程化里的常规操作，步骤也不复杂：

1. 先在你的gulpfile.js里加两个复制资源的任务，把Materialize的CSS和JS从node_modules挪到dist目录：

const gulp = require('gulp');

// 复制Materialize的CSS到dist/css文件夹
gulp.task('copy-materialize-css', () => {
  return gulp.src('node_modules/materialize-css/dist/css/materialize.min.css')
    .pipe(gulp.dest('./dist/css'));
});

// 复制Materialize的JS到dist/js文件夹
gulp.task('copy-materialize-js', () => {
  return gulp.src('node_modules/materialize-css/dist/js/materialize.min.js')
    .pipe(gulp.dest('./dist/js'));
});

// 把这两个任务整合到你的构建流程里，比如和其他打包任务一起执行
gulp.task('build', gulp.series('copy-materialize-css', 'copy-materialize-js', /* 这里加你已有的其他构建任务 */));

2. 之后在index.html里引用dist目录下的资源就行：

<link rel="stylesheet" href="./dist/css/materialize.min.css">
<script src="./dist/js/materialize.min.js"></script>

• 优点太多了：生产部署只需要传dist目录就行，体积小；资源路径统一规范，符合前端项目的常规结构；还能和Gulp的压缩、合并等优化任务结合，进一步提升页面性能。
• 唯一的小缺点就是需要写几行Gulp配置，但这都是一次性的工作，长期来看能省很多麻烦。

总结一下 #

• 开发阶段：可以先用方案1，快速启动项目调试，不用纠结配置；
• 准备部署到生产环境：一定要切换到方案2，这是行业内的标准做法，能避免各种部署时的资源问题。

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