How to implement project building and file merging in js?-JS Tutorial-php.cn

Previous words

Generally, we use build tools to complete the automation of projects. This article mainly introduces how to use nodeJS to implement simple project structure construction and file merging

Project construction

Assume that the final project name is 'test' and the structure is as follows As shown in the figure

Then, first you need to set up a JSON object to save the directory structure to be created

var projectData = {'name' : 'test','fileData' : [ {'name' : 'css','type' : 'dir'}, {'name' : 'js','type' : 'dir'}, {'name' : 'images','type' : 'dir'}, {'name' : 'index.html','type' : 'file','content' : '\n\t\n\t\ttitle\n\t
\n\t\n\t\tHello
\n\t\n', } ] };

Copy after login

Directory structure The creation logic is as follows

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; } }); } }

Copy after login

File merging

Assume that the goal is to merge the files in the 'test' directory All js files. The 'test' directory structure is as follows, including 1.js and 2.js in the js folder

1.js js2.js

Copy after login

Among them, the contents of 1.js and 2.js are as follows

//1.jsconsole.log(1);//2.jsconsole.log(2);

Copy after login

Before merging these two files, you first need to implement a directory traversal function to traverse the 'test' directory. According to the directory traversal chapter in the nodejs file operation blog, you can get the following code

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); } }); }

Copy after login

The logic of file merging is as follows

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); });

Copy after login

In this way, when the content of the 1.js file changes, the merged result file result.js It will take effect immediately and be re-merged into the latest content

The above is the detailed content of How to implement project building and file merging in js?. For more information, please follow other related articles on the PHP Chinese website!