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

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

/**

 * Created by 毅 on 2015/9/20.

 */

var projectData = {

    'name' : 'project',

    '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;

            }

        });

    }

}

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

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

var fs = require('fs');

var filedir = './project/source';

fs.watch(filedir, function(ev, file) {

    //console.log(ev + ' / ' + file); // 这里不需要判断file是否有内容

    //只要有一个文件发生了变化，我们就需要对这个文件夹下的所有文件进行读取，然后合并

    fs.readdir(filedir, function(err, dataList) {

        var arr = [];

        console.log(dataList);

        dataList.forEach(function(f) {

            if (f) {

                var info = fs.statSync(filedir + '/' + f);

                //console.log(info);

                if (info.mode == ) {

                    arr.push(filedir + '/' + f);

                }

            }

        });

        //console.log(arr);

        //读取数组中的文件内容，并合并

        var content = '';

        arr.forEach(function(f) {

            var c = fs.readFileSync( f );

            //console.log(c);

            content += c.toString() + '\n';

        });

        console.log(content);

        fs.writeFile('./project/js/index.js', content);

    });

})

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. ip地址+进程端口号+路径参数同样实现restful访问

    1.ip地址+进程端口号+路径参数同样实现restful访问 2. 我:还有个问题,龙哥,ip地址+端口+路径参数,也能实现restful访问吧,:可以 我:好我:所以,我只要访问,服务器ip地址+n ...

  2. Spring框架学习之第3节

    model层(业务层+dao层+持久层) spring开发提倡接口编程,配合di技术可以更好的达到层与层之间的解耦 举例: 现在我们体验一下spring的di配合接口编程,完成一个字母大小写转换的案例 ...

  3. 对话框上右下角显示resize icon(可以拖动改变对话框的大小)（在WM_CREATE的时候，增加WS_THICKFRAME风格）

    CStatusBar m_StatusBar;  // 成员变量 // 全局变量 static UINT auIDStatusBar[] = { ID_SEPARATOR }; //在对话框类的WM_ ...

  4. C#之你懂得的反射

    前言:反射在C#中虽然不常用(如果不需要动态加载xx.dll),但是有时候却是设计某个程序或者完成某类功能比较好用的技术.比如:一个支持动态扩展的程序,这样就需要动态加载dll,动态创建加载dll的程 ...

  5. CentOS进程资源占用高原因分析命令

    1.查看进程的线程:ps -eLf|egrep 'gateserver|UID' 2.跟踪线程调用: strace  -p 15530 3.统计线程中函数的调用小号CPU时间:strace  -p 1 ...

  6. C# winform窗体假死

    C#  winform窗体假死 我们经常会遇到当执行一个比较大的函数时,窗体会出现假死的现象,给用户的体验不是很好,于是我们遇到了问题,那么就必须解决,我们该如何解决呢,首先在自己的脑里画个问号,接下 ...

  7. php数据库操作常用相关函数

    MySQL访问函数都需要有相应的权限才能运行.常用的相关函数介绍如下: (1)integer mysql_connect(主机,用户名,口令); 此函数开始一个对指定主机上的MySQL数据库的连接.若 ...

  8. C# 字符流打印类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  9. 关于scut使用WebService

    起初是看见官方例子里天界行的项目使用了WebService想试一下.用来做充值回调,后来发现由于版本更新已经弃用了 问了下管理员,由于天界行直接从iis服务端移植过来所以还保留了Webservice的 ...

  10. leetcode：Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...