Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter la création de projets et la fusion de fichiers en js ?

零下一度
Libérer: 2017-06-26 13:32:04
original
2092 Les gens l'ont consulté

Mots précédents

Généralement, nous utilisons des outils de build pour compléter l'automatisation des projets. Cet article présente principalement comment utiliser nodeJS pour implémenter une construction simple de structure de projet et une fusion de fichiers

Construction de projet

Supposons que le nom final du projet soit « test » et que la structure est le suivant Comme le montre la figure

Ensuite, vous devez d'abord configurer un objet JSON pour enregistrer la structure de répertoires à créer

var projectData = {'name' : 'test','fileData' : [
        {'name' : 'css','type' : 'dir'},
        {'name' : 'js','type' : 'dir'},
        {'name' : 'images','type' : 'dir'},
        {'name' : 'index.html','type' : 'file','content' : '<html>\n\t<head>\n\t\t<title>title</title>\n\t</head>\n\t<body>\n\t\t<h1>Hello</h1>\n\t</body>\n</html>',
        }
    ]
};
Copier après la connexion

Annuaire La logique de création de la structure est la suivante

var fs = require('fs');if ( projectData.name ) {
    fs.mkdirSync(projectData.name);var fileData = projectData.fileData;if ( fileData && fileData.forEach ) {
        fileData.forEach(function(f) {
            f.path = projectData.name + '/' + f.name;
            f.content = f.content || '';switch (f.type) {case 'dir':
                    fs.mkdirSync(f.path);break;case 'file':
                    fs.writeFileSync(f.path, f.content);break;default :break;
            }
        });
    }
}
Copier après la connexion

Fusion de fichiers

Supposons que l'objectif soit de fusionner 'test' tous les fichiers js du répertoire. La structure du répertoire 'test' est la suivante, comprenant 1.js et 2.js

1.js
js2.js
Copier après la connexion

dans le dossier js Parmi eux, le contenu de 1.js et 2. js sont les suivants

//1.jsconsole.log(1);//2.jsconsole.log(2);
Copier après la connexion

Avant de fusionner ces deux fichiers, vous devez d'abord implémenter une fonction de traversée de répertoire pour parcourir le répertoire 'test' selon le chapitre sur la traversée de répertoire dans le. blog sur les opérations de fichiers nodejs, vous pouvez obtenir le code suivant

function travel(dir, callback) {
    fs.readdirSync(dir).forEach(function (file) {var pathname = path.join(dir, file);if (fs.statSync(pathname).isDirectory()) {
            travel(pathname, callback);
        } else {
            callback(pathname);
        }
    });
}
Copier après la connexion

La logique de la fusion de fichiers est la suivante

var fs = require('fs');var path = require('path');var path = require('path');var filedir = './test';

fs.watch(filedir, function(ev, file) {//用于存放所有的js文件var arr = [];//将每一个js文件的路径存到arr数组中function travel(dir) {
        fs.readdirSync(dir).forEach(function (file) {var pathname = path.join(dir, file);       if (fs.statSync(pathname).isDirectory()) {
                travel(pathname);
            } else {
                arr.push(pathname);
            }
        });
    }      //只要有一个文件发生了变化,我们就需要对这个文件夹下的所有文件进行读取,然后合并    travel(filedir);//读取数组arr中的文件内容,并合并function concat(arr){var content = '';
        arr.forEach(function(item) {var c = fs.readFileSync(item);
            content += c.toString() + '\n';
        });    
        fs.writeFile('./result.js', content);
    }
    concat(arr);
});
Copier après la connexion

Dans de cette façon, lorsque le contenu du fichier 1.js change, le fichier de résultats fusionné result.js prendra effet immédiatement et sera refusionné dans le dernier contenu

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!