首页 > 代码库 > 使用nodeJS实现前端项目自动化之项目构建和文件合并

使用nodeJS实现前端项目自动化之项目构建和文件合并

2024-09-30 12:41:39   217人阅读

前面的话

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

 

项目构建

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

技术分享

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

var projectData =http://www.mamicode.com/ {    ‘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 =http://www.mamicode.com/ 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.jsjs    2.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会立刻生效，并重新合并为最新内容

技术分享

 

<script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script>

使用nodeJS实现前端项目自动化之项目构建和文件合并


联系
我们