一、前端自动化-项目构建

我们平时写代码，喜欢建一个project，然后里面是css、js、images文件，以及index.html，而node可以自动化构建好项目，如下：

  1. /**
  2.  * Created by 毅 on 2015/9/20.
  3.  */
  4.  
  5. var projectData = {
  6.  
  7.     'name' : 'project',
  8.     'fileData' : [
  9.         {
  10.             'name' : 'css',
  11.             'type' : 'dir'
  12.         },
  13.         {
  14.             'name' : 'js',
  15.             'type' : 'dir'
  16.         },
  17.         {
  18.             'name' : 'images',
  19.             'type' : 'dir'
  20.         },
  21.         {
  22.             'name' : 'index.html',
  23.             'type' : 'file',
  24.             '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>',
  25.         }
  26.     ]
  27.  
  28. };
  29.  
  30. var fs = require('fs');
  31.  
  32. if ( projectData.name ) {
  33.     fs.mkdirSync(projectData.name);
  34.  
  35.     var fileData = projectData.fileData;
  36.  
  37.     if ( fileData && fileData.forEach ) {
  38.  
  39.         fileData.forEach(function(f) {
  40.  
  41.             f.path = projectData.name + '/' + f.name;
  42.  
  43.             f.content = f.content || '';
  44.  
  45.             switch (f.type) {
  46.  
  47.                 case 'dir':
  48.                     fs.mkdirSync(f.path);
  49.                     break;
  50.  
  51.                 case 'file':
  52.                     fs.writeFileSync(f.path, f.content);
  53.                     break;
  54.  
  55.                 default :
  56.                     break;
  57.  
  58.             }
  59.  
  60.         });
  61.  
  62.     }
  63.  
  64. }

二、前端自动化--监听文件的变化

在上面的自动生成的project文件夹里面再建一个source文件夹。下面的代码就是监听source文件夹的任何变化，不管是新建文件还是往新建文件中加入内容。它都会合并到js/index.js中去。

  1. var fs = require('fs');
  2.  
  3. var filedir = './project/source';
  4.  
  5. fs.watch(filedir, function(ev, file) {
  6.  
  7.     //console.log(ev + ' / ' + file); // 这里不需要判断file是否有内容
  8.  
  9.     //只要有一个文件发生了变化，我们就需要对这个文件夹下的所有文件进行读取，然后合并
  10.  
  11.     fs.readdir(filedir, function(err, dataList) {
  12.  
  13.         var arr = [];
  14.  
  15.         console.log(dataList);
  16.  
  17.         dataList.forEach(function(f) {
  18.  
  19.             if (f) {
  20.                 var info = fs.statSync(filedir + '/' + f);
  21.  
  22.                 //console.log(info);
  23.  
  24.                 if (info.mode == ) {
  25.                     arr.push(filedir + '/' + f);
  26.                 }
  27.             }
  28.  
  29.         });
  30.  
  31.         //console.log(arr);
  32.  
  33.         //读取数组中的文件内容，并合并
  34.  
  35.         var content = '';
  36.         arr.forEach(function(f) {
  37.             var c = fs.readFileSync( f );
  38.             //console.log(c);
  39.  
  40.             content += c.toString() + '\n';
  41.  
  42.         });
  43.  
  44.         console.log(content);
  45.  
  46.         fs.writeFile('./project/js/index.js', content);
  47.  
  48.     });
  49.  
  50. })

node前端自动化的更多相关文章

  1. 前端自动化之路之gulp,node.js

    随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其 ...

  2. Node.js前端自动化工具：gulp

    前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...

  3. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  4. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  5. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  6. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  7. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  8. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  9. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

随机推荐

  1. Java 网络编程(一)

    网络通讯要素 IP地址(InetAddress) 端口号 传输协议 图示: TDP/IP模型 以OSI 7层模型讲解数据的传输 InetAddress   InetAddress类主要表示IP地址. ...

  2. CS001: 清理浮动的几种方法以及对应规范说明

    以下内容转自 http://www.w3help.org/zh-cn/casestudies/001 <!==================> 前言 浮动 Floats 是 CSS 中的 ...

  3. 【uva1502/hdu4117-GRE Words】DP+线段树优化+AC自动机

    这题我的代码在hdu上AC,在uva上WA. 题意:按顺序输入n个串以及它的权值di,要求在其中选取一些串,前一个必须是后一个的子串.问d值的和最大是多少. (1≤n≤2×10^4 ,串的总长度< ...

  4. MongoDB (十) MongoDB Limit/限制记录

    Limit() 方法 要限制 MongoDB 中的记录,需要使用 limit() 方法. limit() 方法接受一个数字型的参数,这是要显示的文档数. 语法: limit() 方法的基本语法如下 & ...

  5. hdu 3590 PP and QQ

    知识储备: Anti-SG 游戏和 SJ 定理  [定义](anti-nim 游戏)  桌子上有 N 堆石子,游戏者轮流取石子.  每次只能从一堆中取出任意数目的石子,但不能不取.  取走最后一 ...

  6. CentOS系统配置redis

      1.切换到/usr/sr cd /usr/src wget http://download.redis.io/releases/redis-3.2.0.tar.gz   2.解压,安装 tar x ...

  7. iOS开发--动画篇之layout动画深入

    "不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...

  8. Delphi动态事件深入分析（对象方法在调用的时候会传递一个隐含的Self指针，而该指针的值在EAX中。即左边第一个参数）

    Delphi动态事件深入分析 2009-2-7 作者:不得闲核心提示:本实验证明了在类中方法的调用时候,所有的方法都隐含了一个Self参数,并且该参数作为对象方法的第一个参数传递... 首先做一个空窗 ...

  9. Maven+Spring+MVC结构中，jetty/tomcat是如何启动项目的[转]

    针对maven配置的Spring+MVC项目,我们用Maven自带的jetty和tomcat插件进行调试,这很方便.但是调试时,这些插件所启动的web服务器,是如何来将我们的工程作为一个web项目启动 ...

  10. JWFD开源项目官方网站预览

    自己做的...感觉还比较正规哈....JWFD开源项目还是需要一个官方网站的...