前面的话

  一般地,我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用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.js

1.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会立刻生效,并重新合并为最新内容

使用nodeJS实现前端项目自动化之项目构建和文件合并的更多相关文章

  1. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

  4. 基于 flow.ci 实现 PHP 项目自动化持续集成

    高效程序员的习惯之一--让开发流程自动化.Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导.无论你是否使用过持续集成, ...

  5. 3 分钟轻松搭建 Ruby 项目自动化持续集成

    任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这是一篇关于 Ruby 项目持续集成的快速指导教程,教大家如何使用 f ...

  6. Ubuntu环境下使用npm编译从git上clone下来的前端(Javascript)项目

    一.更新Ubuntu软件源 打开终端依次输入: $ sudo apt-get update $ sudo apt-get install -y python-software-properties s ...

  7. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  8. docker | jenkins 实现自动化部署项目,后端躺着把运维的钱挣了!(上)

    前言 背景 最近在帮学校导师写项目,团队有4个人,项目前后端分离.如果是选择瀑布式开发:(在约定好接口的情况下)A.B同学写前端,C.D同学写后端,然后约定一个时间统一联调,最后将项目交付安装到客户机 ...

  9. 项目自动化建构工具gradle 入门5——在intellij中做一个gradle的web工程

    之前的几个小节,都是纯手工建文件夹,纯手工拷贝war包,或者纯手工解压个zip看看结果,,,,这还是我写了玩的helloWorld.若是玩大工程.几十个人的团队协同开发时,这么玩,,,,暴躁的程序员估 ...

随机推荐

  1. 你的计算机也可以看懂世界——十分钟跑起卷积神经网络(Windows+CPU)

    众所周知,如果你想研究Deep Learning,那么比较常用的配置是Linux+GPU,不过现在很多非计算机专业的同学有时也会想采用Deep Learning方法来完成一些工作,那么Linux+GP ...

  2. 【TED】如何掌握你的自由时间

    [TED]如何掌握你的自由时间 生活 某天翻阅自己原来记录的有道云笔记,发现自己在学校的时候,要求自己每周看三个TED视频,并写一些看后的总结,随意翻阅了下,就发现当时做的好的一些笔记,现在一看就能想 ...

  3. NodeJs系列一:神奇的nodejs

    nodejs是什么 nodejs能解决什么问题 非阻塞型I/O及事件环机制 什么时候使用nodejs nodejs是什么 Node.js是让Javascript脱离浏览器运行在服务器的一个平台(或者叫 ...

  4. 2017/4/27-Gradle的配置与Spring的下载

    Gradle的配置与Spring的下载 1.Gradle 1) 介绍 Gradle是一个基于Groovy的构建工具,类似Maven,但是比其更加简单轻便.它可以自动化地进行软件构建.测试.发布.部署. ...

  5. Ruby读excel写入mysql

    安装mysql2 打开cmd: gem install mysql2 代码 require 'win32ole' require 'mysql2' class String def addslashe ...

  6. Net分布式系统之五:微服务架构

    因工作较忙,抽时间将框架遇到的问题和框架升级设计进行记录. 一.背景&问题 之前框架是一个基于SOA思想设计的分布式框架.各应用通过服务方式提供使用,服务之间通信是RPC方式调用,具体实现基于 ...

  7. 跨域资源共享CORS详解

    简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...

  8. 详解MySQL存储过程的“异常处理”

    阅读目录:存储过程的异常处理 定义异常处理 单一异常处理程序 continue exit 多个异常处理程序 关于错误编号和SQLSTATE码 使用3个处理程序 忽略某一异常的处理 异常处理的命名 异常 ...

  9. java:Comparable比较器

    /*Comparable 是java.lang中的一个接口,所以是默认导入的,不需要显示的导入. *如果你先直接在本类中实现排序,那么可以直接实现该接口(例如:public class Compara ...

  10. vector实现最大流EK算法

    序: 在之前的文章中实现了不利用STL实现EK算法,效率也较高.这次我们企图简化代码,减少变量的使用与手写模拟的代码. 注意:vector等STL的container在不开O2优化的时候实现同一个效果 ...