vue 过滤项目没有使用的静态图片

一、开发遇到的问题总和

1、怎么样知道项目那些图片有使用 ？
2、怎么样知道使用的图片如何删除没有使用的图片 ？
3、怎么样在 node 启动 js文件时候带标识 ？

二、解决遇到的问题

1、怎么样知道项目那些图片有使用 ？

解答：在vue中 build 的时候默认会把使用的使用到的图片转成 Base64，我们禁止转就可以在打包好的 dist文件中找到已经使用到的图片了

// 在 vue.config.js 文件

  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 0 }))
  }

2、怎么样知道使用的图片如何删除没有使用的图片 ？

解答：当你解决了第一个问题的时候，没有的图片自然就是没有使用到的了，如何删除后面会详细讲，大概就是使用 node 中的 “fs” 想找到指定目录下的所有图片整理成数组，然后在获取 build 后的 img 图片整理成数组

3、怎么样在 node 启动 js文件时候带标识 ？

解答：引入 commander 包

// 安装 commander

yarn add commander -S

// 在需要使用的 js文件中引入

const program = require('commander') // 引用commander模块

三、commander 完整案例

1、 js 文件引入

const program = require('commander') // commander
program.option('-version, --debug [p]')
program.parse(program.argv)

console.log(program._optionValues.debug)

2、启动文件（在命令行中输入）

node 文件.js -version 我是需要传入的参数

node文件代码
 

// 获取项目工程里的图片
var fs = require('fs')// 引用文件系统模块
var image = require('imageinfo') // 引用imageinfo模块
const program = require('commander') // commander
program.option('-version, --debug [p]')
program.parse(program.argv)

// 获取所有文件
function readFileList (path, filesList) {
  var files = fs.readdirSync(path)
  if (files) {
    files.forEach(function (itm, index) {
    var stat = fs.statSync(path + itm)
    if (stat.isDirectory()) {
      // 递归读取文件
      readFileList(path + itm + '/', filesList)
    } else {
      var obj = {}// 定义一个对象存放文件的路径和名字
      obj.path = path// 路径
      obj.filename = itm// 名字
      filesList.push(obj)
    }
  })
  }
}
// 获取所有文件夹
function readfolderList (path, filesList) {
  var files = fs.readdirSync(path)
  if (files) {
    files.forEach(function (itm, index) {
    var stat = fs.statSync(path + itm)
    if (stat.isDirectory()) {
      var obj = {}// 定义一个对象存放文件的路径和名字
      obj.path = path// 路径
      obj.filename = itm// 名字
      filesList.push(obj)
      // 递归读取文件
      readfolderList(path + itm + '/', filesList)
    }
  })
  }
}
// // 判断是否是空文件夹
function isEmptyDir (fPath) {
  var pa = fs.readdirSync(fPath)
  if (pa.length === 0) {
    return true
  } else {
    return false
  }
}
var getFiles = {
  // 获取文件夹下的所有文件夹
  readFolderList: function (path) {
    var filesList = []
    readfolderList(path, filesList)
    return filesList
  },
  // 获取文件夹下的所有文件
  getFileList: function (path) {
    var filesList = []
    readFileList(path, filesList)
    return filesList
  },
  // 获取文件夹下的所有图片
  getImageFiles: function (path, type) {
    var imageList = []
    this.getFileList(path).forEach((item) => {
      var ms = image(fs.readFileSync(item.path + item.filename))
      if (ms.mimeType) {
        if (type === 1) {
          imageList.push(item.filename)
        } else {
          imageList.push(item.path + item.filename)
        }
      }
    })
    return imageList
  }
}

// 获取文件夹下的所有图片
const name = program._optionValues.debug || 'tiantong'

var list = getFiles.getImageFiles('./dist/img/', 1)
var srclist = getFiles.getImageFiles(`./src/assets/${name}/`, 2)
if (list.length && srclist.length) {
  srclist.forEach(function (item, index) {
    const rowIndex = list.findIndex(v => {
      const arr = v.split('.')
      return item.indexOf(`${arr[0]}`) !== -1
    })
    if (rowIndex === -1) {
      fs.unlink(item, function (err) {
         if (err) {
           console.log('删除失败')
         }
      })
    }
  })
  /* 过滤删除空的文件夹 */
  const filesList = getFiles.readFolderList(`./src/assets/${name}/`)
  filesList.reverse().forEach(v => {
    const url = `${v.path}${v.filename}/`
    if (isEmptyDir(url)) {
      fs.rmdirSync(url)
    }
  })
}
console.log('过滤完成！！！')