gulp解决缓存问题 js css代码压缩图片压缩 添加hash

gulp解决缓存问题 js css代码压缩图片压缩 添加hash

第一次使用gulp真是四处碰壁 我整个整理一下
当前我的版本：

$ npm -v
8.1.0
$ node -v
v16.12.0
$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

1.安装gulp

npm install -g gulp-cli

2.创建项目

npm init
npm install gulp --save-dev

3.新建gulfile

在根目录新建一个gulfile.js文件

工具引入：

import gulp from 'gulp'

我的文件结构

1.引入gulp
2.压缩css

  npm install gulp-clean-css --save-dev

  
// 压缩css
  import cleanCSS from "gulp-clean-css";
  
  function minifyCss() {
  return gulp.src("src/css//.css") // 原文件路径
      .pipe(cleanCSS())
      .pipe(gulp.dest("dist/css/")); // 压缩后文件路径
  }

3.压缩js

   npm install gulp-terser --save-dev

   
// 压缩js
   import terser from "gulp-terser";

   function minifyJs() {
   return gulp.src("src/js//.js*") // 原文件路径
    .pipe(terser({
      warnings: true
    }))
    .pipe(gulp.dest("dist/js/")); // 压缩后文件路径
  }

4.压缩html

  npm install gulp-htmlmin --save-dev

  import htmlmin from "gulp-htmlmin";
  function minifyHTML() {
    return src("_production/*/*.html")
      .pipe(htmlmin({ collapseWhitespace: true }))
      .pipe(dest("_production/"));
}

5.压缩image (这里我遇到一点问题)

npm install gulp-imagemin --save-dev

// 压缩img
import imagemin from "gulp-imagemin"

function minifyHTML() {
  return gulp.src("src/*/*.html")
    .pipe(htmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest("dist/"));
}

运行的时候这里报了一个这样的错 （Error in plugin “gulp-imagemin”）

我的解决办法是

npm uninstall gulp-imagemin
cnpm install -D gulp-imagemin@6.1.0

使用cnpm 安装6.1.0版本就可以正常运行了

6.对css js文件后缀生成hash

npm install gulp-rev --save-dev

// 对 CSS 和 JS 文件名后缀生成 Hash
import rev from "gulp-rev";

function revCss() {
 return gulp.src(["dist/css/**/*.css"]) // 已经压缩的 CSS 文件路径
    .pipe(rev())
    .pipe(gulp.dest("dist/css/")) // 添加 Hash 后的文件路径 
    .pipe(rev.manifest())
    .pipe(gulp.dest("rev/css")); // 将原始路径映射到修改后的路径，将被写到 rev/css 下
}
function revJs() {
 return gulp.src("dist/js/*/*.js") // 已经压缩的 JS 文件路径
    .pipe(rev())
    .pipe(gulp.dest("dist/js")) // 添加 Hash 后的文件路径 
    .pipe(rev.manifest())
    .pipe(gulp.dest("rev/js")); // 将原始路径映射到修改后的路径，将被写到 rev/js 下
}

7.生成的hash对应到html当中

npm install gulp-rev-collector --save-dev

// 把生成 Hash 文件写入HTML 中
import revCollector from "gulp-rev-collector";

function revCollect() {
  return gulp.src(["rev/*/*.json", "dist/*.html"])  //找到hash的json文件 替换dist下html页面
   .pipe(revCollector({
     replaceReved: true
    }))
    .pipe(gulp.dest("dist", {sourcemaps: true}));  //映射之后的地址
}

// 上面的dist/.html 如果写的是dist//.html’ 那么最后生成的文件dist/dist/–.html
// 上面的dist/.html 如果写的是dist/.html’ 那么最后生成的文件dist/–.html**

8.删除文件夹

npm install gulp-clean --save-dev

// 删除文件夹
import cleanFile from "gulp-clean";

function removeOldCssJs() {
  return gulp.src(["dist/js/", "dist/css/"], {
      read: false,
      allowEmpty: true
    })
    .pipe(cleanFile())
}

最后导出

const build = gulp.series(removeOldCssJs, minifyCss, minifyJs, minifyImg, minifyHTML, revCss, revJs, revCollect)
export default build;

运行：

gulp

之后再删除node-modules之后在运行
还是出现了报错：

Error in plugin "gulp-imagemin"

npm uninstall gulp-imagemin
cnpm install --save-dev gulp-imagemin