案例分析：前端自動化 1. 實現一個自動創建前端項目文件的js 通過node.js自動創建前端項目目錄，包括js目錄，js目錄css目錄，index.html和對應的內容。 初步的代碼如下： 2.實現一個對合併文件夾內容的程式 場景描述：在前端開發中，常常需要對幾個文件的代碼進行合併。試想，在伺服器 ...
案例分析：前端自動化
1. 實現一個自動創建前端項目文件的js
通過node.js自動創建前端項目目錄，包括js目錄，js目錄css目錄，index.html和對應的內容。
初步的代碼如下：
var projectData={
'name':'前端模板',//總文件夾名
'fileData':[{
'name':'style',
'type':'dir'
},{
'name':'script',
'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<h1>hello</h1>\n\t</body>\n\t</html>'
}]
};
var fs=require('fs');
if(projectData.name){
fs.mkdir(projectData.name);
var fileData=projectData.fileData;
if(fileData&&Array.isArray(fileData)===true){//如果該屬性對象存在,而且是數組
fileData.forEach(function (f) {//是數組就迴圈它！
//接下來要做的有：根據f.type判斷是創建f.name的文件還是文件夾，如果是index.html就寫入它
console.log(f);
if(f.type=='dir'){
fs.mkdir('./'+projectData.name+'/'+f.name, function (mkdirErr) {
if(!mkdirErr){
console.log('成功創建了名字為'+f.name+'的文件夾');
if(f.name!=='images'){//不是圖片的話還要創建一個同名文件在該目錄下,內容為空
var fileName='';
if(f.name=='style'){
fileName=f.name+'.css';
}else if(f.name=='script'){
fileName=f.name+'.js';
}
fs.writeFile('./'+projectData.name+'/'+f.name+'/'+fileName,'',function () {
console.log('已經嘗試創建了名為'+fileName+'的文件');
});
}
}else{
console.log(f.name+'文件夾創建失敗！');
}
})
}else{//不是文件夾就創建文件吧
if(f.name=='index.html'){
fs.writeFile('./'+projectData.name+'/'+f.name,f.content,function () {
console.log('已經嘗試創建了index文件');
});
}
}
})
}else{
console.log('fileData出錯');
}
}2.實現一個對合併文件夾內容的程式
場景描述：在前端開發中，常常需要對幾個文件的代碼進行合併。試想，在伺服器環境下，有一個source文件夾。內有1.txt和2.txt兩個文件甚至更多（n.txt）。同時在source同目錄還有一個main.js文件夾。
當我每次修改source文件夾裡邊的任意一個txt文件時，這段程式可以把文件夾內所有文件的內容讀取出來，放到一個content內，在把content的內容寫入main.js中。
var fs=require('fs');
var filedir='./source';
fs.watch(filedir,function (ev,file) {//監聽文件夾是否改變
//console.log(ev+'/'+file);//不需要判斷file是否有內容
//只要有一個文件發生了變化，就需要對這個文件夾下的所有文件進行讀取，然後合併
fs.readdir(filedir,function (err,dataList) {
//console.log(dataList);
//第一步，先把每次改變時source文件夾的所有內容讀取出來，放到數組arr里
var arr=[];
dataList.forEach(function (f) {
if(f){//如果source文件夾存在文件
//console.log(filedir+'/'+f);
var info=fs.statSync(filedir+'/'+f);//
// console.log(info); if(info.mode=='33206'){//如果是文件，該路徑保存到數組
arr.push(filedir+'/'+f)
}
}
});
//console.log(arr);
//console.log('------分界線-------');
//第二部：讀取數組文件的內容併合並
var content='';
arr.forEach(function (f) {
var c=fs.readFileSync(f);//獲取內容
//console.log(c);
content+='/*來自'+f+'*/'+'\n'+c.toString()+`\n`;
console.log(content);
//接下來就是把數據內容保存到main.js
fs.writeFile('./main.js',content);
});
console.log('-----')
})
});這段代碼就可以在當前文件目錄下創建一個main.js，裡邊包含了輸出的內容
main.js的輸出效果
挺好，挺好。想新建多少就新建多少
