Home > Article > Web Front-end > How to implement project building and file merging in js?
How to implement project building and file merging in js?
- 零下一度Original
- 2017-06-26 13:32:042031browse
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' : '<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>',
}
]
};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;
}
});
}
}
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
Among them, the contents of 1.js and 2.js are as follows
//1.jsconsole.log(1);//2.jsconsole.log(2);
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);
}
});
}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);
});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!