文档章节

学习 kityminder 笔记(十二) 构建部分

刘军兴
 刘军兴
发布于 2015/12/02 11:24
字数 1127
阅读 89
收藏 0
点赞 0
评论 0

有点不太一样的 grunt 任务.

1. clean --- 清理临时文件. 作为入门了解 grunt 任务.

在 Gruntfile.js 中, 有加载 clean 任务的部分:

   grunt.loadNpmTasks('grunt-contrib-clean');

找到位于 node_modules 目录下的 grunt-contrib-clean 子目录 (通过 npm 安装的), 找到对应的 package.json,
打开查看, 可发现该模块也放在 github 上面: https://github.com/gruntjs/grunt-contrib-clean .

现在简单看一眼 tasks 目录下的 clean.js 文件. 里面的重点有:

    grunt.registerMultiTask('clean', ..., function() {
       ... clean(filepath, options);    // 调用实际清理函数.
    });

再看看 grunt 模块下的各个文件(没时间细看, 简单翻了一下), 大致是读取 Gruntfile.js, package,json 提取信息,
然后调用各种 task 执行任务.

2. 重点是一个 dependence 任务:

任务的 npm 模块为 grunt-module-dependence, 到该子目录的 package.json 有
   homepage = https://github.com/HanCong03/

该任务与其它任务不同的是, 它通过组装多个 js 文件为一个, 动态改变了程序的结构. 必须要了解最后生成的文件
结构, 才能理解前面使用 seajs 要求的规格 define(xxx) . 以我们的 hello.js 和一个子模块 foobar.js 为例:

var _p = {  // 这是 dependence 模块生成的一个对象.
  r: function() ... // 稍后细看, 估计类似于 require() 函数.
};

// src/foobar.js 被编号为 0, 估计按照顺序.
_p[0] = {
  // 这个函数 value 即是 foobar.js 中用 define() 定义的工厂函数.
  value: function(require, exports, module) { ... }
};

// src/hello.js 编号为 1.
_p[1] = {
  // 同样是工厂函数.
  value: function(...) {
    // 重点在这里, 原来写的 require('foobar') 被代换为调用 _p.r() 函数以索引 0.
    var foobar = _p.r(0);
    ... 其它部分 ...
  }
};

// 后面其它部分稍后需要再看.

 

如上所示, 重点在于改变了程序的结构, 模块被变成 _p[n] = {...} 形式, 对其它模块的引用变成 _p.r(n) 的形式.

其中函数 _p.r(n) 现在可以细看看, 因已知 n 是模块编号, 且可通过 _p[n] 的方式访问到.

_p.r = function(index) {
  var mod = _p[index];  // 用一个 mod 名字表明这是一个模块, 原程序不是这样.
  // 如果此模块已经初始化过, 则直接返回其 value.
  if (mod.inited)
    return mod.value;

  // 调用工厂方法(如果是的话)进行初始化.
  if (mod.value is function) {
    mod.inited = true;  // 先设置值以 防止递归?
    mod.value.call(......);   // 调用该工厂方法. 可能导致递归调用 _p.r() 
    // 处理返回的 exports 略
  }
  else { // 可能只是定义了一些数据, 而不是工厂方法
     mod.inited = true;
    return mod.value;
  }
}

因此这里的 _p.r() 函数, 相当于取代了 seajs.require() 方法, 以将一组模块组装在一起成为单一的大的 js.

生成的大的 js 文件后面还有 use() 方法, 看似取代 seajs.use() 方法, 并初始加载所指定的主模块 'hello'.
这是在 options 中指定的 entrance 值.

所有这些变换无疑都是 dependence 模块运作的了, 一旦了解了原理, 当需要的时候我们就能够自己定义这些
过程, 进行自己所需的变换.

// dependence.js 部分代码摘读.
module.exports = function(grunt) {

  // 注册为一种 grunt 任务. 这里有一个自吹自擂我们就略过吧...
  grunt.registerMultiTask('dependence', 'The best Grunt plugin ever.' function() {
    // 其它略... 这里遍历要合并的 src 文件.
    src_files.forEach(function() {
      source = read(src);  // 读入源文件.
      // 对代码进行变换(transform) 然后放入模块列表中.
      all_source[module_index++] = transform(source);
      // 合并后的源码再处理处理.
      removeRequire(...);
      join() ... wrap() ... format()... -> 写入目标文件
    });
  });

  // 看注释了解即可, 详细代码略.
  // 对 module 执行转换, 更改其定义方式, 使其可以脱离 define 方法.
  function transform(...) { 
     // 用正则表达式找 define... , 修改|替换某些东西...
  }
  
  // 删除 require 依赖.
  function removeRequire(...) {
     // 用正则表达式替换 require(...) 为 _p.r()
  }

  // 其它 format(格式化源码), wrap(包裹最终的源码) 等辅助函数略.

大致是这样了. 这样最后合并出的 kity.js 就不需要 seajs 的支持了, 而且代码也很少, 这一点还是值得赞的.
不过程序的变换也许可以更好一些, 例如, define, require 函数也许不需要变换, 直接提供一个简单的?

3. 任务 concat

给步骤 2 生成的 js 外面再包一个闭包, 即提供一个 banner, 提供一个 footer. 比较简单就不用细说了.

4. 任务 uglify

压缩 js 为最小化. 理解即可, 实在需要再去看怎么实现, 但估计是用 flex 做代码分析, 压缩空格, 去掉注释, 命名改短
等, 现在还不想看, 了解作用即可.

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 150
码字总数 226172
作品 0
昌平
百度脑图解析:如何进行web复杂应用的渐进式开发

内容来源:2017 年 4 月 8 日,张博在“HTML5梦工场 & 微软开发者沙龙第05期—持续集成”进行《Web复杂应用的 「渐进式」开发》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方...

⋅ 06/04 ⋅ 0

再学习 Kity 笔记(五) 初步

在过去两周左右, 一直在学习 kity, kityminder, nodejs, seajs 等一系列项目. 有些认识经过一段时间学习, 已经发生了 变化, 使得原有笔记过时. 兹为深入学习, 有必要回顾复习重新看一遍. Kit...

刘军兴 ⋅ 2015/12/04 ⋅ 0

《Pro ASP.NET MVC 3 Framework》学习笔记目录

《Pro ASP.NET MVC 3 Framework》简介: 作者: Adam Freeman 和 Steven Sanderson 出版社: Apress; New 平装: 820页 语种: 英语 ISBN: 1430234040 声明:笔记里面按我自己的理解翻译了大部分...

mszhangxuefei ⋅ 2012/02/07 ⋅ 0

学习 kityminder 笔记(五)

接着学习 kityminder, 前面其实没看完 kity, 大致了解之后, 我们先看看 minder 部分, 两者结合起来学更好些. 下载 kityminder-core (按文档说只含核心部分), 从 git-hub, 建立起开发/构造环境...

刘军兴 ⋅ 2015/11/19 ⋅ 0

学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴 ⋅ 2015/12/04 ⋅ 0

“我爱智能”原创性博客索引

不知不觉,博客也写出了一点小体系,新的阶段已经开始,未来希望再接再厉继续补充这一体系,在成长中写博客,在博客中成长,在此先做一个小的梳理,谢谢大家的支持。 一)关于深度学习系列 ...

on2way ⋅ 2015/08/29 ⋅ 0

hjimce算法类博文目录 个人博客:http://blog.csdn.net/hjimce 个人qq:1393852684 知乎:https://www.zhihu.com/people/huang-jin-chi-28/activities 一、深度学习 深度学习(七十)darknet...

hjimce ⋅ 2016/01/24 ⋅ 0

学习 kityminder 笔记(九)

继续学习 kityminder. === module/style.js === // 拷贝选中节点的当前样式,包括字体、字号、粗体、斜体、背景色、字体色// 对应为 styleNames = ['font-size', 'font-family', 'font-weig...

刘军兴 ⋅ 2015/11/24 ⋅ 0

Android实战经验之图像处理及特效处理的集锦(总结版)

1 Android学习笔记进阶之在图片上涂鸦(能清屏) 2 Android学习笔记之详细讲解画圆角图片 3 Android学习笔记进阶20之得到图片的缩略图 4 Android学习笔记进阶19之给图片加边框 5 Android学习笔...

xiaosi ⋅ 2012/03/12 ⋅ 25

MyBatis学习笔记系列教程

【MyBatis学习笔记】系列之预备篇一:ant的下载与安装 【MyBatis学习笔记】系列之预备篇二:ant入门示例 【MyBatis学习笔记】系列之一:MyBatis入门示例 【MyBatis学习笔记】系列之二:MyBat...

HenrySun ⋅ 2016/10/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 35分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部