Comment utiliser nodejs pour séparer js et css dans les fichiers html (exemple de code)

Le contenu de cet article explique comment utiliser nodejs pour séparer les js et les css dans les fichiers html (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Résumé : Le contenu à implémenter dans cet article est d'utiliser nodejs pour ajouter, supprimer, modifier et vérifier des fichiers. L'exemple de démonstration -》 Séparez le contenu du script et du style dans un fichier html, puis générez. js et les fichiers css séparément. Traitement intermédiaire de l'api-》async/await asynchrone, Promesse

Hébergement du projet : extract-js-css, star de bienvenue

pour télécharger directement le code :

// 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> {
        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 = &#39;<link rel="stylesheet" href="./test.css">&#39;;
    let jsrc = &#39;<script src="./test.js">&#39;;
    let styleCollection, scriptColletion;
    let cssContent = &#39;&#39;, jsContent = &#39;&#39;, htmlContentStr = &#39;&#39;;

    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,&#39;&#39;).replace(/<\/style>/g, &#39;&#39;).replace(/("")/g,&#39;&#39;)
    
    for (let i =0;i<scriptColletion.length;i++) {
        jsContent += JSON.stringify(scriptColletion[i]);
    }
    
    jsContent = jsContent.replace(/<script>/g,&#39;&#39;).replace(/<\/script>/g, &#39;&#39;)
    .replace(/<\/script>"*<script>/g, &#39;&#39;).replace(/("")/g,&#39;&#39;)
    
    await appendFile(&#39;./test/test.css&#39;, JSON.parse(cssContent), &#39;css&#39;);
    console.log(&#39;我应该是在---css写入成功---后出现！&#39;);

    await appendFile(&#39;./test/test.js&#39;, JSON.parse(jsContent), &#39;js&#39;);
    console.log(&#39;我应该是在---js写入成功---后出现！&#39;);

    htmlContentStr = originContent
    .replace(allStyleReg, &#39;&#39;)
    .replace(cssReg, cssLink)
    .replace(allScriptReg, &#39;&#39;)
    .replace(jsReg, jsrc);
    console.log(&#39;copyTest.html 文本已经格式化，准备写入&#39;);
    await writeHtml(&#39;./test/copyTest.html&#39;, htmlContentStr);

    console.log(&#39;==========================game-over=============================&#39;);
})()</style></_files.length>

Le code est correct. Il n'y a rien à expliquer, vous le comprendrez si vous prenez votre temps. Exécutez :

node extract-js-css

Si vous souhaitez utiliser le module es6, utilisez la méthode import import, vous devez installer un babel séparé, utiliser ce package pour compiler dans es5 et l'exécuter pour. utilisation spécifique, vous pouvez arrêter le projet et l'exécuter.
Pour ce projet, il faut rappeler ce qui suit :

Le traitement des fichiers est constitué de toutes les opérations asynchrones. S'il s'agit d'une seule méthode d'opération asynchrone (par exemple : méthode appendFile), il s'agit d'ajouter de manière asynchrone. contenu dans le fichier, encapsulez-le directement dans une promesse, puis renvoyez-le.

Si une opération contient plusieurs logiques de traitement asynchrone, elle doit être dans cette méthode. Utilisez async pour déclarer la méthode, utilisez wait pour attendre l'opération asynchrone et enfin renvoyez une promesse

avant d'exécuter le processus principal. , nous utilisons la méthode déclarée par async pour appeler (j'appelle directement la fonction anonyme), et utilisons wait pour attendre l'opération asynchrone, de sorte que notre processus principal soit un processus d'exécution synchrone, ce qui semble très rafraîchissant. .

La méthode API pour le fonctionnement asynchrone des fichiers dans cet article est asynchrone. La documentation de développement de nodejs fournit une documentation sur les opérations synchrones. Vous pouvez utiliser l'API synchrone directement. Mon objectif principal ici est d'utiliser la méthode de promesse async/wait lors d'opérations asynchrones pour mieux la comprendre.

Une démo dans l'article fournit une solution pour traiter plusieurs opérations asynchrones, une opération asynchrone contient plusieurs opérations asynchrones, y compris l'exécution d'opérations asynchrones dans une boucle, qui cible spécifiquement le traitement des chaînes de fichiers HTML, par rapport. avec rub, c'est relativement simple lors de l'utilisation de correspondances régulières, de formatage et d'analyse de chaînes. Après avoir lu le contenu du fichier, vous avez besoin de JSON.stringify, et plus tard, lors du remplissage du fichier, vous avez besoin de JSON.parse. Je n'ai pas encore trouvé de méthode appropriée. Si quelqu'un a une méthode appropriée, faites-le-moi savoir et communiquons. ensemble. .

Ce qui suit est un processus d'exécution d'une méthode asynchrone principale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!