文档章节

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

刘军兴
 刘军兴
发布于 2015/12/02 11:24
字数 1127
阅读 98
收藏 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
博文 184
码字总数 226359
作品 0
昌平
百度脑图解析:如何进行web复杂应用的渐进式开发

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

06/04
0
0
学习 kityminder 笔记(五)

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

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(六)

接上篇, 接着学习 kityminder. == core/keyreceiver.js == extend class Minder { init-hook(): 构造时设置选项, 侦听 'paperrender' 事件, 以调用 _initKeyReceiver() _initKeyReceiver():......

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(七)

接上篇继续学习. 本段都是 seajs require(module/*.js) 的, 看起来是按照字母顺序 a-z 排列的, 所以应没什么互相依赖性. 考虑到前面有很多细节都略过, 或不懂, 在学习过程中可能还要不断回顾...

刘军兴
2015/11/20
0
0
再学习 Kity 笔记(五) 初步

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

刘军兴
2015/12/04
68
0

没有更多内容

加载失败,请刷新页面

加载更多

精选Spring Boot三十五道必知必会知识点!

Spring Boot、Spring MVC 和 Spring 有什么区别? 1、Spring Spring最重要的特征是依赖注入。所有 SpringModules 不是依赖注入就是 IOC 控制反转。 当我们恰当的使用 DI 或者是 IOC 的时候,...

java知识分子
3分钟前
0
0
docker多容器部署lnmp环境

环境:RHEL7.5 ip:192.168.10.102,主机名:lb02 一、创建web、数据库目录 web网站目录为:/wwwroot,属主属组:www [root@lb02 ~]# mkdir /wwwroot[root@lb02 ~]# useradd -s /sbin/nolo...

人在艹木中
31分钟前
1
0
eclipse运行springboot项目报错‘找不到或无法加载主类’

这是一个很烦躁的问题~,往往困住大家好长时间,然后各种百度。借此,咱将这个问题有可能产生的原因进行一下总结。若有不完善之处欢迎大家在下面留言指出~~ Duang!问题出现 然后开始尝试解决...

Code辉
52分钟前
1
0
springboot oauth2 跨域设置

@Overridepublic void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/security/**") .authentica......

昆虫大侠
54分钟前
1
0
08-利用思维导图梳理JavaSE-泛型

08-利用思维导图梳理JavaSE-泛型 主要内容 1.泛型的基本概念 1.1.定义 1.2.使用前提 1.3.使用泛型的好处 2.泛型的使用 2.1.泛型类定义 2.2.泛型对象定义 2.3.泛型中的构造方法 2.4.泛型方法的...

飞鱼说编程
56分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部