前面的话

　　一般地，我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用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. Java线程池（ThreadPool）详解

    线程五个状态(生命周期): 线程运行时间 假设一个服务器完成一项任务所需时间为:T1 创建线程时间,T2 在线程中执行任务的时间,T3 销毁线程时间.    如果:T1 + T3 远大于 T2,则可以 ...

  2. 关于css禁止文本复制属性

    最近在做DHTMLX框架替换,新框架dhx的grid是不能选中内容复制的 虽然相对来说是安全些的,但是客户体验度一定会大打折扣 网页上禁止复制主要靠JavaScript来实现.<BODY onc ...

  3. cookie和session的区别异同

    1.用于保存页面信息:如自动登录,记住用户名 2.对于同一个网站只有一套cookie,它是以域名为单位的,一个域名就是一套,数量大小有限4k-10k,同时会具有过期时间 3.JS中通过document ...

  4. MVC实现SSO

    近来工作无事,想做个SSO, 之前做过一个项目用到SSO,自己也没有看明白是个什么东西.现在正好有时间,所以想研究下. 先是从网上看到了SSO的思路: 三个站点:SiteA,SiteB,SiteMai ...

  5. 【Java SE】如何用Java实现冒泡排序

    摘要: 作为一名Java开发工程师,手头如果不会几个常见的排序算法,怎么可能经过笔试题这一关呢.据我所知,许多大型的公司的笔试题都有排序题,那我们先从最简单的排序:冒泡排序开始,以后几篇博客将继续更新 ...

  6. 【渗透测试】PHPCMS9.6.0 任意文件上传漏洞+修复方案

    这个漏洞是某司的一位前辈发出来的,这里只是复现一下而已. 原文地址:https://www.t00ls.net/thread-39226-1-1.html 首先我们本地搭建一个phpcms9.6.0的 ...

  7. DirectFB 之 字体显示

    通过本文,可以简单地了解directfb字体内部运行机制. 简介 SetFont函数,是每次写字体前必须调用的一个函数,否则directfb程序将会报错.这个函数是将某种字体与某个surface相关联 ...

  8. [移动端] IOS下border-image不起作用的解决办法

    上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border ...

  9. 蓝桥杯- 煤球数目-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. 【运维工程师必知必会】——MySql基础

    一.SQL语句 1.分类 DDL(data definition language)数据定义语言(create.alter.drop),管理基础数据.例如:库.表     #运维要熟练,开发也要熟练 ...