使用node.js的fs模块实现css文件打包压缩

为了防止回调地狱, 我们先将 fs 模块中的方法使用 promise 进行一步封装

let fs = require('fs'),
   path = require('path'),
   resultObj = {};

let suffixHandle = (pathname) => {
 let suffixReg = /\.(PNG|JPG|JPEG|WEBP|ICO|BMP|SVG|MP4|MP3|M3U8|WAV|OGG)$/i
 return suffixReg.test(pathname)
}

// READ-FILE / READ-DIR / MK-DIR / RM-DIR / UN-LINK /
/*
* 读取文件时 需要使用编码 以及过滤 富媒体 文件
* */
['readFile', 'readdir', 'mkdir', 'rmdir', 'unlink'].forEach(item => {
 resultObj[item] = function (pathname, encoding = 'utf8') {
   return new Promise((resolve, reject) => {
     let callback = function (err, res) {
       !err ? resolve(res) : reject(err)
     }
     // 如果是富媒体编码就为null
     suffixHandle() ? encoding = null : null
     pathname = path.resolve(pathname)

     if (item !== 'readFile') {
       encoding = callback
       encoding = null
     }
     fs[item](pathname, encoding, callback)
   })
 }
});

// WRITE-FILE / APPEND-FILE
['writeFile', 'appendFile'].forEach(item => {
 resultObj[item] = function (pathname, content, encoding = 'utf8') {
   // 支持JSON类型数据
   (typeof content === 'object' && content !== null) ? content = JSON.stringify(content) : null
   // 将传入的内容转为 对象
   typeof content !== 'string' ? content += '' : null
   return new Promise((resolve, reject) => {
     let callback = function (err, res) {
       !err ? resolve(res) : reject(err)
     }
     pathname = path.resolve(pathname)
     fs[item](pathname, content, encoding, callback)
   })
 }
})

module.exports = resultObj

然后是合并压缩css代码

	/*
* 合并并且压缩CSS
* */

let less = require('less')
let {
  readFile,
  readdir,
  mkdir,
  writeFile
} = require('../fstest/promiseFS')

let compressCss = null

readdir('./css').then(res => {
  // 读取所有的css文件
  res = res.map(item => {
    return readFile('./css/' + item)
  })
  return Promise.all(res)
}).then(res => {
  // 压缩读取的css
  res = res.join('')
  // 对合并的css进行压缩
  return less.render(res, {
    // 是否需要配置项
    compress: true
  })
}).then(res => {
  // 创建文件夹
  compressCss = res.css
  return mkdir('./dist')
}).then(res => {
  // 将css放入文件夹
  return writeFile('./dist/index.min.css', compressCss)
}).catch(err => {
  // 捕获文件存在错误:  如果文件是 存在错误 依旧执行写文件
  if (err.errno === -4075) {
    return writeFile('./dist/index.min.css', compressCss)
  } else {
    return Promise.reject(err)
  }
}).then(res => {
  // 如果操作文件完成
  console.log('compress success!')
}).catch(err => {
  // 如果不是文件报错就执行这个 打印错误信息
  console.log(err.message)
})