摘要:摘要本文要實現的內容,使用對文件的增刪改查,演示的例子分離出一個文件里面的和里面的內容,然后多帶帶生成文件和文件。下面是執行一個主方法的一個過程歡迎評閱和指正我是貳伶邇
摘要: 本文要實現的內容,使用nodejs 對文件的增刪改查,演示的例子-》分離出一個html 文件里面的script 和style 里面的內容,然后多帶帶生成js文件和css 文件。中間處理異步的api-》async/await , Promise
項目托管: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 內容 /** * */ 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 /** * 向文件中追加內容 * @param {是文件名字} path * @param {寫入文件的內容} 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}數據已追加到文件`); resolve() }); }) } // 寫一個html const writeHtml = (path, data) => { return new Promise(resolve => { fs.writeFile(path, data, (err) =>{ if(err) { console.log("err", err) return } console.log(`${path} 寫入成功,功能結束!`); resolve() // 必須resolve 。不然 promise 就到此為止,調用該方法后面的代碼將不執行 }) }) } // 插件 方法入口 (async ()=>{ console.log("==========================game-start============================="); await deleteDir("./test"); console.log("我應該是等---刪除文件夾后---才出現") await mkdirTest(); console.log("我應該是在---文件夾新建成功---后出現!"); let cssReg = /[s|S]*?/ig; let allScriptReg = /[s|S]*? /g, "").replace(/("")/g,"") for (let i =0;i/ig; let cssLink = ""; let jsrc = ""; let styleCollection, scriptColletion; let cssContent = "", jsContent = "", htmlContentStr = ""; let originContent = await readHtml(); styleCollection = originContent.match(cssReg); scriptColletion = originContent.match(jsReg); // 處理 css for (let i =0;i /g,"").replace(/ /g,"").replace(//g, "") .replace(/"* /g, "").replace(/("")/g,"") await appendFile("./test/test.css", JSON.parse(cssContent), "css"); console.log("我應該是在---css寫入成功---后出現!"); await appendFile("./test/test.js", JSON.parse(jsContent), "js"); console.log("我應該是在---js寫入成功---后出現!"); htmlContentStr = originContent .replace(allStyleReg, "") .replace(cssReg, cssLink) .replace(allScriptReg, "") .replace(jsReg, jsrc); console.log("copyTest.html 文本已經格式化,準備寫入"); await writeHtml("./test/copyTest.html", htmlContentStr); console.log("==========================game-over============================="); })()
關于async/await 的學習推薦:async/await
代碼確實沒什么好解釋的,慢慢看就明白了。運行:node extract-js-css
如果你要使用 es6 module,用 import 導入方法,需要多帶帶裝一個babel,使用這個包去編譯成es5,在運行,具體使用可以down項目運行一下。
針對此項目,需要提醒說明以下:
對文件的處理都是異步操作,如果是單一的一個異步操作方法(比如:appendFile 方法),它就是往文件里面異步添加內容,直接封裝成一個promise,然后 return 出來就好。
如果一個操作里面包含多個異步處理邏輯的就需要在這個方法里面,用async 聲明方法,用await 等待異步操作,最后return 出去一個promise
在執行主流程中,我們用async聲明的方法進行調用(我這里是匿名函數直接調用) ,用await 進行等待異步操作,這樣我們的主流程就是一個同步的執行的流程,看起來很爽朗。
文中的異步操作文件的api 方法是異步的,nodejs 開發文檔提供了同步操作文檔,大家可以直接使用同步的api。我這里主要是聯系在異步操作的過程中,使用async/ await promise 方法,更好的掌握它。
文中的一個demo 提供了處理多個異步、一個異步操作里面包含多個異步操作,包括在循環里執行異步操作 的一個方案,里面具體針對HTML 文件的字符串處理,比較搓搓,在用正則匹配和字符串格式化和解析字符串的情況比較單一。在讀取完文件內容后,需要 JSON.stringify,后來在填入文件中的時候要 JSON.parse , 目前沒找到合適的方法,如果有大佬有合適的方法,歡迎告知與我,大家一起交流。
歡迎評閱和指正!我是貳伶邇
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103352.html
摘要:我覺得這方面的原因是當時對和的依賴,導致大家對的興趣不弄,錯過了最佳時機,這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過,說新的構建工具就是的構建工具。 文章來源 最近幾年,前端發展越來越迅速,各種萌新加入了前端這個大家庭,大有趕IOS、超Android的趨勢呀!同時,萌新們提出了各種前端工作問題,除了最基礎的html、css、js三板斧之外,最讓人頭疼的應...
摘要:我覺得這方面的原因是當時對和的依賴,導致大家對的興趣不弄,錯過了最佳時機,這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過,說新的構建工具就是的構建工具。 文章來源 最近幾年,前端發展越來越迅速,各種萌新加入了前端這個大家庭,大有趕IOS、超Android的趨勢呀!同時,萌新們提出了各種前端工作問題,除了最基礎的html、css、js三板斧之外,最讓人頭疼的應...
項目開始前,我們先聊一聊關于項目的一些說明。該項目起始于2017年初,當時公司主要技術棧為gulp+angular,鑒于react的火熱的生態,在公司決定研發bss管理系統時選用react開發,目的也是為react native打下基礎,以解決后期公司大前端技術棧的逐步成熟。(當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟),既然決定換新,項目的構建也跟著一起換,從gulp轉向火熱的...
摘要:當然需要的工具不只有這些,其他的一些可選工具還有文件壓縮壓縮時用到的文件重命名檢查一般編輯器自帶校驗提示工具等等,具體根據項目需要安裝。 gulp 前端自動化構建工具 需要配置nodejs環境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創建項目目錄、初始化npm包、gulp npm init gulp init 下載gul...
閱讀 1718·2021-10-18 13:34
閱讀 3906·2021-09-08 10:42
閱讀 1551·2021-09-02 09:56
閱讀 1606·2019-08-30 15:54
閱讀 3127·2019-08-29 18:44
閱讀 3298·2019-08-26 18:37
閱讀 2212·2019-08-26 12:13
閱讀 454·2019-08-26 10:20