php合并js,js怎么实现项目构建和文件合并?

前面的话

一般地，我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用nodeJS来实现简单的项目结构构建和文件合并

项目构建

假设，最终实现的项目名称为'test'，结构如下图所示

那么，首先需要先设置一个JSON对象来保存要创建的目录结构

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\t

Hello

\n\t\n',

}

]

};

目录结构的创建逻辑如下

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;

}

});

}

}

文件合并

假设，目标是合并'test'目录下的所有js文件。'test'目录结构如下所示，包含1.js，以及js文件夹内的2.js

1.js

js2.js

其中，1.js与2.js的内容如下

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

在合并这两个文件之前，首先需要实现一个目录遍历函数来遍历'test'目录，根据nodejs之文件操作博客中的目录遍历章节，可得到如下代码

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

}

});

}

文件合并的逻辑如下

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

});

这样，当1.js文件内容发生改变时，合并后的结果文件result.js会立刻生效，并重新合并为最新内容