這篇文章主要介紹如何使用nodejs分離html文件里的js和css，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出延壽免費(fèi)做網(wǎng)站回饋大家。

摘要： 本文要實(shí)現(xiàn)的內(nèi)容，使用nodejs 對(duì)文件的增刪改查，演示的例子-》分離出一個(gè)html 文件里面的script 和style 里面的內(nèi)容，然后單獨(dú)生成js文件和css 文件。中間處理異步的api-》async/await , Promise

項(xiàng)目托管：extract-js-css , 歡迎star

直接上代碼：

// extract-js-css

// import fs from 'fs'

var fs = require('fs')

// import csscomb from 'csscomb'

// var csscomb = require('csscomb')

// var comb = new csscomb('zen');

// console.log(comb)

 

// 刪除文件

const deleteFile = (path)=>{

  return new Promise(resolve => {

    fs.unlink(path, (err) => {

      if (err) {

        console.log(err)

        return

      };

      console.log(`已成功刪除 ${path}文件`);

      resolve()

    });

  })

}

 

// 刪除文件夾

const deleteDir = async (path)=>{

  let _files = await new Promise (resolve => {

    fs.readdir(path, (err,files) => {

      if (err) {

        console.log(err)

      };

      console.log(`已成功讀取 ${path} 文件夾`);

      resolve(files)

    })

  })

 

  if(_files && _files.length) {

    for(let i =0;i<_files.length;i++) {

      // console.log(_files[i],'innnnnn')

      await deleteFile('./test/'+ _files[i])

    }

  }

  // console.log('delete hou')

 

  await new Promise(resolve => {

    fs.rmdir(path, (err) => {

      if (err) {

        console.log(err)

      };

      console.log(`已成功刪除空 ${path}文件夾`);

      resolve()

    })

  });

}

const emptyDir = (path) => {

  return new Promise(resolve => {

    fs.rmdir(path, (err) => {

      if (err) {

        console.log(err)

      };

      console.log(`已成功刪除空 ${path}文件夾`);

      resolve()

    })

  })

}

// 新建文件夾

/**

 * 

 */

const mkdirTest = ()=>{

  return new Promise(resolve => {

    fs.mkdir('./test', { recursive: true }, (err, data)=>{

      if (err) {

        console.log(err)

      };

      console.log('新建文件夾成功')

      resolve()

    })

  })

}

 

// 讀取html 內(nèi)容

/**

 * 

 */

const readHtml = ()=>{

  return new Promise(resolve => {

    fs.readFile('./test.html', 'utf-8', (err, data)=>{

      if(err) {

        throw Error(err)

      }

      console.log('test.html 讀取成功！--NO1')

      resolve(data)

    })

  })

}

 

// 寫入css 和js

/**

 * 向文件中追加內(nèi)容

 * @param {是文件名字} path 

 * @param {寫入文件的內(nèi)容} data 

 * @param {文件類型} type 

 * @author erlinger

 * @time 

 */

const appendFile = (path, data, type) => {

  return new Promise(resolve => {

    fs.appendFile(path, data, (err) => {

      if (err) {

        console.log(err)

      };

      console.log(`${type}數(shù)據(jù)已追加到文件`);

      resolve()

    });

  })

}

// 寫一個(gè)html

const writeHtml = (path, data) => {

  return new Promise(resolve => {

    fs.writeFile(path, data, (err) =>{

      if(err) {

        console.log('err', err)

        return

      }

      console.log(`${path} 寫入成功，功能結(jié)束!`);

      resolve() // 必須resolve 。不然 promise 就到此為止，調(diào)用該方法后面的代碼將不執(zhí)行

    })

  })

}

 

// 插件 方法入口

(async ()=>{

  console.log('==========================game-start=============================');

  await deleteDir('./test');

  console.log('我應(yīng)該是等---刪除文件夾后---才出現(xiàn)')

 

  await mkdirTest();

  console.log('我應(yīng)該是在---文件夾新建成功---后出現(xiàn)！');

 

  let cssReg = /