使用nodeJS实现前端项目自动化之项目构建和文件合并
2017-06-04 09:31
681 查看
前面的话
一般地,我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用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' : '<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>', } ] };
目录结构的创建逻辑如下
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.js1.js js 2.js
其中,1.js与2.js的内容如下
//1.js console.log(1); //2.js console.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会立刻生效,并重新合并为最新内容
相关文章推荐
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- Maven 教程(15)— 实现多个项目关联自动化构建(maven-invoker-plugin插件的使用)
- 使用Nodejs+Yeoman定制前端开发项目构建工具
- 使用脚本实现自动化构建项目
- Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目
- linux(centos)下使用jenkins + maven + git码云(或github) 实现自动化构建项目
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- Maven实现多个项目关联自动化构建(maven-invoker-plugin插件的使用)
- Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
- Docker+Jenkins持续集成环境(2)使用docker+jenkins构建nodejs前端项目
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- 【小项目】使用shell和expect实现简易的文件分发系统
- 使用 Gradle 实现 TFS 构建自动化
- 使用Nodejs 实现Excel文件转换为JSON、Xml文件格式
- Modelsim中使用TCL脚本编写do文件实现自动化仿真
- 前端项目使用module.exports文件一定要Webpack编译吗?请问gulp可以编译这种文件吗
- 使用Xcode5构建非ARC项目以及单独在某个文件上使用非ARC
- node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用提高nodejs调试效率
- 使用 Hbuild 快速构建生成现代化前端项目