Gulp解决引入node_modules下的js/css文件路径问题

使用gulp-useref插件

在我们将文件构建到dist目录下后，我们的html会有一些对node_modules下的文件的依赖，例如jquery.js和bootstrap.css，这些文件并没有拷贝到我们的dist目录，这样我们部署上线就会找不到这些文件。

这时候我们就可以借助到gulp-useref插件，这个插件会自动去处理html当中的构建注释，例如：

 <!-- build:css assets/styles/vendor.css -->
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <!-- endbuild -->
  
  <!-- build:css assets/styles/main.css -->
  <link rel="stylesheet" href="assets/styles/main.css">
  <!-- endbuild -->

在build和endbuild之间就是一些引入的文件，build后面的是文件类型，例如此处的build：css，后面的路径就是最终打包到后面的路径当中，如果是多个同类型文件，就会一起打包到一个文件中。

除此之外，我们还能在这个过程中对这些文件进行压缩。

安装gulp-useref，yarn add gulp-useref --dev

使用

const { src, dest } = require("gulp")
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()

const useref = () => {
	return src("dist/*.html", {base: "dist"})
    .pipe(plugins.useref({ searchPath: ['dist', '.'] })) // 使用useref会创建一个文件转换流，这个转换流会去把我们代码中的那些构建注释做一个转换
    // 需要配置searchPath参数，告诉useref去哪个文件下找到这个要被操作的文件
    // 例如main.css文件要去dist目录下找，/node_modules之类的文件就要去项目根目录下找
    // 像这种数组形式的参数我们一般将使用多的放在前面，这样在前面找到了就不会往后执行，性能会有一些优化
    .pipe(dest("release"))
}

对文件进行压缩
yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
gulp-htmlmin 是用来压缩html的
gulp-uglify 是用来压缩js的
gulp-clean-css 是用来压缩css的
由于文件有不同的类型，所以我们要借助于gulp-if判断文件类型进行操作
yarn add gulp-if --dev

判断文件类型使用对应插件进行压缩

const useref = () => {
  return src("dist/*.html", {base: "dist"})
    .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
    .pipe(plugins.if(/\.js$/,plugins.uglify())) 
    .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/,plugins.htmlmin({
      collapseWhitespace:true, // 清除换行符
      minifyCSS: true, // 压缩css
      minifyJS: true // 压缩js
    })))
    .pipe(dest("release"))
}

转换压缩后的效果