<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        nodejs分離html文件里面的js和css的方法

        來源:懂視網 責編:小采 時間:2020-11-27 21:59:08
        文檔

        nodejs分離html文件里面的js和css的方法

        nodejs分離html文件里面的js和css的方法:摘要: 本文要實現的內容,使用nodejs 對文件的增刪改查,演示的例子-》分離出一個html 文件里面的script 和style 里面的內容,然后單獨生成js文件和css 文件。中間處理異步的api-》async/await , Promise 項目托管:extract-js-css ,
        推薦度:
        導讀nodejs分離html文件里面的js和css的方法:摘要: 本文要實現的內容,使用nodejs 對文件的增刪改查,演示的例子-》分離出一個html 文件里面的script 和style 里面的內容,然后單獨生成js文件和css 文件。中間處理異步的api-》async/await , Promise 項目托管:extract-js-css ,

        摘要: 本文要實現的內容,使用nodejs 對文件的增刪改查,演示的例子-》分離出一個html 文件里面的script 和style 里面的內容,然后單獨生成js文件和css 文件。中間處理異步的api-》async/await , Promise

        項目托管:extract-js-css , 歡迎star

        直接上代碼:

        // 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 = /<style>[\s|\S]*?<\/style>/ig;
         let jsReg = /<script>[\s|\S]*?<\/script>/ig;
         let allStyleReg = /<\/style>[\s|\S]*?<style>/ig;
         let allScriptReg = /<\/script>[\s|\S]*?<script>/ig;
         let cssLink = '<link rel="stylesheet" href="./test.css" rel="external nofollow" >';
         let jsrc = '<script src="./test.js"></script>';
         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<styleCollection.length;i++) {
         cssContent += JSON.stringify(styleCollection[i]);
         }
        
         cssContent = cssContent.replace(/<style>/g,'').replace(/<\/style>/g, '').replace(/("")/g,'')
         
         for (let i =0;i<scriptColletion.length;i++) {
         jsContent += JSON.stringify(scriptColletion[i]);
         }
         
         jsContent = jsContent.replace(/<script>/g,'').replace(/<\/script>/g, '')
         .replace(/<\/script>"*<script>/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=============================');
        })()
        
        

        代碼確實沒什么好解釋的,慢慢看就明白了。需要提醒以下:

        1. 對文件的處理都是異步操作,如果是單一的一個異步操作方法(比如:appendFile 方法),它就是往文件里面異步添加內容,直接封裝成一個promise,然后 return 出來就好。
        2. 如果一個操作里面包含多個異步處理邏輯的就需要在這個方法里面,用async 聲明方法,用await 等待異步操作,最后return 出去一個promise
        3. 在執行主流程中,我們用async聲明的方法進行調用(我這里是匿名函數直接調用) ,用await 進行等待異步操作,這樣我們的主流程就是一個同步的執行的流程,看起來很爽朗。
        4. 文中的異步操作文件的api 方法是異步的,nodejs 開發文檔提供了同步操作文檔,大家可以直接使用同步的api。我這里主要是聯系在異步操作的過程中,使用async/ await promise 方法,更好的掌握它。
        5. 文中的一個demo 提供了處理多個異步、一個異步操作里面包含多個異步操作,包括在循環里執行異步操作 的一個方案,里面具體針對HTML 文件的字符串處理,比較搓搓,在用正則匹配和字符串格式化和解析字符串的情況比較單一。在讀取完文件內容后,需要 JSON.stringify,后來在填入文件中的時候要 JSON.parse , 目前沒找到合適的方法,如果有大佬有合適的方法,歡迎告知與我,大家一起交流。

        下面是 執行一個主 async方法的一個過程


        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        nodejs分離html文件里面的js和css的方法

        nodejs分離html文件里面的js和css的方法:摘要: 本文要實現的內容,使用nodejs 對文件的增刪改查,演示的例子-》分離出一個html 文件里面的script 和style 里面的內容,然后單獨生成js文件和css 文件。中間處理異步的api-》async/await , Promise 項目托管:extract-js-css ,
        推薦度:
        標簽: js html 分離
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲一区二区久久| 国产亚洲精品美女久久久久| 亚洲国产精品久久久天堂 | 亚洲人成电影在线观看网| 亚洲午夜成激人情在线影院| 九九美女网站免费| 四虎影视永久免费观看网址| 亚洲国产综合专区电影在线 | 亚洲成_人网站图片| 国产99久久久久久免费看| 五月亭亭免费高清在线| 久久久久亚洲AV综合波多野结衣| 国产大片线上免费看| 亚洲福利视频导航| 一级毛片在线播放免费| 成人免费视频试看120秒| 亚洲影院在线观看| 美女无遮挡拍拍拍免费视频| 日韩一级在线播放免费观看| 亚洲欧洲日本国产| 精品免费tv久久久久久久| 亚洲AV无码专区国产乱码电影| 精品亚洲A∨无码一区二区三区| 亚洲第一成年免费网站| 麻豆国产精品免费视频| 亚洲综合激情视频| 日韩免费高清大片在线| 国产亚洲精品激情都市| 中文字幕一区二区免费| 亚洲中文字幕视频国产| 黄色网页免费观看| 小小影视日本动漫观看免费| 国产黄色片免费看| 亚洲第一页在线播放| 日韩a级毛片免费观看| 9久热精品免费观看视频| 久久久亚洲AV波多野结衣 | 亚洲Av无码国产一区二区| AV无码免费永久在线观看| 亚洲伊人久久大香线蕉苏妲己| 亚洲日本一线产区和二线产区对比|