案例分析:前端自动化

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的输出效果



挺好,挺好。想新建多少就新建多少

Node.js入门笔记(5):案例两则的更多相关文章

  1. Node.js入门笔记(1):基本概念

    Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...

  2. Node.js入门笔记(6):web开发方法

    使用node进行web开发 用户上网流程: 表面上看:打开浏览器--输入网址--跳转--上网. 背后的过程是什么呢? http请求网址到指定的主机--服务器接收请求--服务器响应内容到用户浏览器--浏 ...

  3. Node.js入门笔记

    第一步自然是安装了.我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本号.注意是以msi为扩展名的,然后下一步.没啥好说的,下载地址例如以下: 32位 ...

  4. Node.js入门笔记(4):文件系统(fs)

    文件系统(FileSystem) 文件系统模块 对于文件无外乎创建修改添加. File System - 文件系统模块 - require('fs') fs模块是核心模块,需要使用require导入后 ...

  5. Node.js入门笔记(3):全局对象(2)

    buffer 用于更好操作二进制数据,他是一个全局变量.类似数组. var a=new Buffer(); buffer类的三种实现 第一种创建方式 new Buffer(size);size[Num ...

  6. Node.js入门笔记(2):全局对象(1)

    以下将以API文档为基础进行分析学习 global对象 这些对象在所有模块里都可用.有些对象不是在全局作用域而是在模块作用域里,这些情况下面文档都会标注出来. __filename--返回当前模块文件 ...

  7. Node.js 入门资料

    小毛驴的阿凡提的 Node.js 入门笔记 http://www.cnblogs.com/Afanty/category/1007304.html

  8. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  9. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

随机推荐

  1. W3School-CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...

  2. 服务器运行环境(LNMP)安装说明

    服务器运行环境(LNMP)安装说明 因为公司需要一套流程标准,所以写了如下步骤. 先下载文件environment.tar,将文件上传到服务器. 使用命令解压文件,tar xvf environmen ...

  3. android 发送短信功能

    private void sendSMS(String num,String smsBody) { String phoneNum = "smsto:" + num; Uri sm ...

  4. android 控件在不同状态下的内容样式与背景样式

    1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resourc ...

  5. Maven 的classifier的作用

    直接看一个例子,maven中要引入json包,于是使用了 <dependency> <groupId>net.sf.json-lib</groupId> <a ...

  6. ELF Format 笔记(十三)—— 段权限

    ilocker:关注 Android 安全(新手) QQ: 2597294287 一个可被系统加载的程序至少拥有一个可加载段.当系统创建可加载段的内存映像时,会根据 p_flags 赋予一定的访问权限 ...

  7. 洛谷P1328 生活大爆炸版石头剪刀布——S.B.S.

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  8. psutil一个基于python的跨平台系统信息跟踪模块

    受益于这个模块的帮助,在这里我推荐一手. https://pythonhosted.org/psutil/#processes psutil是一个基于python的跨平台系统信息监视模块.在pytho ...

  9. final finally finalize 区别

    public class Demo { public static void main(String[] args) { long start = System.currentTimeMillis() ...

  10. ognl

    一:什么是值栈 1:ValueStack:值栈.其本身的数据结构是一个栈,使用者可以把一些对象存入栈中.然后使用动态的表达式来读取bean的属性.由于值栈中可能有多个对象 值栈会按照对象出栈的顺序依次 ...