文章列表
黎清龙 于 1年前发表 1695 3 0
FIS3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: * 资源嵌入 [http://fis.baidu.com/fis3/docs/user-dev/inline.html] * 资源定位 [http://fis.baidu.com/fis3/docs/user-dev/uri.html] * 声明依赖 [http://fis.baidu.com/fis3/docs/user-dev/require.html] 而整体 构建流程 [http://fis.baidu.com/fis3/docs/build.html] 也没有做过多的改动。 fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 1. 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 2. 提供许多事件锚点 这篇文章主要介绍的就是第2点,讲解fis3提供的特殊事件,及其作用。 2 LOOKUP:FILE fis3 在查找文件资源的时候,通过统一的接口【fis.project.lookup】查找
1年前
构建工具
helondeng 于 1年前发表 2099 1 0
项目构建迁移到fis体系后,打包的问题就跟着来了。打包的基本方式是:分析依赖,合并文件,解决引入。 CSS处理方式 来源 * link 引入 * require 引入 * 其它模块的同名依赖 提取来源 * 正则匹配link * require的方式可以直接通过 file.requires获取 * 处理方式略复杂,需要在分析js依赖时,判断依赖是css文件 打包逻辑最粗暴的方式是allInOne,全部打成一个包。但是多个页面的业务中,有重复的代码被打到了不同的文件中。这种情况下,打包成2个文件比较合适: 一个基础样式,一个页面样式 。 common,reset等公共样式打包成一个文件,Page 级别的样式打包成一个文件 ,common级的样式,每个页面都引入(加载可以利用缓存),页面级样式根据自身的依赖引入不同的文件。 问题 1. 哪些算是公共样式? common文件夹下的所有样式文件? common打包必须要有通用性,确保能够覆盖到大部分(甚至全部)页面,同时又不会太冗余,给页面带来很多不必要的样式 ,这里必须要有一些规则来约束。 1. 打包的灵活性?
1年前
构建工具
ouven ,https://ouvens.github.io/ 于 2年前发表 7101 4 0
一、安装 * 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下: FIS.SET(KEY, VALUE) 设置一些配置,如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取 FIS.GET(KEY) 获取已经配置的属性,和 fis.set() 成对使用 FIS.MATCH(SELECTOR, PROPS, [, IMPORTANT]) 给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作;fis.match 模拟一个类似 css 的覆盖规则,负责给文件分配规则属性,这些规则属性决定了这个文件将会被如何处理;另外,后面分配到的规则会覆盖前面的; fis.match('{a,b}.js', { release: '/static/\$0' }); fis.match('b.js', {
2年前
构建工具
frankfang 于 2年前发表 2327 1 1
原文 [http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding] Sean Silva 给我发来一封信: 我最近在浏览你 npm.js 项目里的代码( 代码链接 [https://github.com/isaacs/npm/blob/master/lib/npm.js] ),很喜欢你的代码风格: 你把逗号放在行首,与上一行 var 中的 r 对齐,或者与上一行的 [ 和 { 对齐。但是我不是很敢学的你风格,因为很多 JS 教材都说 JS 解释器的自动加分号机制会对代码有影响。 如果我不把逗号放在行尾,而是放在下一行行首,在浏览器里是否安全呢?抑或是说只能在 Node 里这样用呢? 2011年11月20日 我回复道: 是的,这样是安全的,而且是完全合法的 JS,每个浏览器都理解。Closure、yuicompressor、packer 和 jsmin 都可以完美地压缩这样的
2年前
构建工具
陈映平 于 2年前发表 1726 3 0
前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出 FIS 跟 require.js 结合的简单例子。 FIS编译流程 如果已熟悉了 FIS 的编译设计,可以跳过这一节,直接进入下一小结。FIS的编译主要有三步: 命令解析–>资源编译–>资源部署 1. 资源编译 :FIS将文件资源抽象成 File 实例,该实例上有文件资源类型、id、内容、部署路径等的属性。对于文件的编译,实际上都是对 File 实例进行操作,比如修改资源的部署路径等(内存里操作)。 2. 资源部署 :根据 File 实例的属性,进行实际的部署动作(磁盘写操作)。 FIS的这套编译体系,使得基于FIS的扩展相对比较容易。在扩展的同时,还可以确保编译的高性能。针对 资源编译环节 的扩展,除非是设计不合理,不然一般情况下不会导致性能的急剧降低。 GETTING STARTED 啰嗦的讲了一大通,下面来点半干货。喜欢 require.js ,但又喜欢用 CMD 编写模块的朋友有福了,下面会简单介绍如何整合 require.js 与 FIS 。
2年前
构建工具
黎腾 ,如果sea能带走我的哀愁 于 2年前发表 2737 2 3
介绍 最近出现的 React Native 再次让跨平台移动端开发这个话题火起来了,曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却大多因为性能或功能问题而放弃,不得不针对不同平台开发多个版本。 但这并没有阻止人们对跨平台开发技术的探索,毕竟谁不想降低开发成本,一次编写就处处运行呢?除了 React Native,这几年还出现过许多其它解决方案,本文我将会对这些方案进行技术分析,供感兴趣的读者参考。 为了方便讨论,我将它们分为了以下 4 大流派: * Web 流:也被称为 Hybrid 技术,它基于 Web 相关技术来实现界面及功能 * 代码转换流:将某个语言转成 Objective-C、Java 或 C#,然后使用不同平台下的官方工具来开发 * 编译流:将某个语言编译为二进制文件,生成动态库或打包成 apk/ipa/xap 文件 * 虚拟机流:通过将某个语言的虚拟机移植到不同平台上来运行 WEB 流
转载自fex.baidu.com
2年前
构建工具
陈映平 于 2年前发表 1763 0 0
前面已经提到了 fis release 命令大致的运行流程。本文会进一步讲解增量编译以及依赖扫描的一些细节。 首先,在 fis release 后加上 --watch 参数,看下会有什么样的变化。打开命令行 fis release --watch 不难猜想,内部同样是调用 release() 方法把源文件编译一遍。区别在于,进程会监听项目路径下源文件的变化,一旦出现文件(夹)的增、删、改,则重新调用 release() 进行增量编译。 并且,如果资源之间存在依赖关系(比如资源内嵌),那么一些情况下,被依赖资源的变化,会反过来导致资源引用方的重新编译。 // 是否自动重新编译if(options.watch){ watch(options); // 对!就是这里 } else { release(options); } 下面扒扒源码来验证下我们的猜想。 WATCH(OPT)细节 源码不算长,逻辑也比较清晰,这里就不上伪代码了,直接贴源码出来,附上一些注释,应该不难理解,无非就是重复 文件变化–>release(opt) 这个过程。 在下一小结稍稍展开下增量编译的细节。
2年前
构建工具
袁飞翔 于 2年前发表 2461 2 0
先是环境:在windows上用VMware安装了ubuntu,用ubuntu运行终端。可以用VMware文件共享、网络文件共享、nginx、ftp实现两个操作系统的文件共享 linux主目录配置文件保存在github: https://github.com/feix760/yuan [https://github.com/feix760/yuan] 如果换一台电脑,我只需要git clone --recursive myGithubPath 就可以拿到以前的配置文件 vim的插件可以用 Bundle [https://github.com/gmarik/Vundle.vim] 来管理,只要在.vimrc用 Plugin 'XXX' 指明需要的插件,随后用 :PluginInstall 自动安装新插件 下面是我的 .vimrc [https://github.com/feix760/yuan/blob/master/.vimrc] 插件配置的部分,随后介绍各个插件的用途 set nocompatible filetype off
2年前
构建工具
陈映平 于 2年前发表 1645 0 0
前面已经已 fis server open 为例,讲解了FIS的整体架构设计,以及命令解析&执行的过程。下面就进入FIS最核心的部分,看看执行 fis release 这个命令时,FIS内部的代码逻辑。 这一看不打紧,基本把 fis-kernel 的核心模块翻了个遍,虽然大部分细节已经在脑海里里,但是要完整清晰的写出来不容易。于是决定放弃大而全的篇幅,先来个概要的分析,后续文章再针对涉及的各个环节的细节进行展开。 看看 FIS-COMMAND-RELEASE 老规矩,献上精简版的 release.js ,从函数名就大致知道干嘛的。 release(options) 是我们重点关注的对象。 'use strict'; exports.register = function(commander){ // fis relase --watch 时,就会执行这个方法function watch(opt){ // ... } // 打点计时用,控制台里看到的一堆小点点就是这个方法输出的function time(fn){ // ...
2年前
构建工具
陈映平 于 2年前发表 1734 2 0
序言 这里假设本文读者对 FIS [http://fis.baidu.com/] 已经比较熟悉,如还不了解,可猛击 官方文档 [http://fis.baidu.com/] 。 虽然FIS整体的源码结构比较清晰,不过讲解起来也是个系统庞大的工程,笔者尽量的挑重点的讲。如果读者有感兴趣的部分笔者没有提到的,或者是存在疑惑的,可以在评论里跑出来,笔者会试着去覆盖这些点。 下笔匆忙,如有错漏请指出。 GETTING STARTED 如在开始剖析FIS的源码前,有三点内容首先强调下,这也是解构FIS内部设计的基础。 1、 FIS支持三个命令,分别是 fis release 、 fis server 、 fis install 。当用户输入 fis xx 的时候,内部调用 fis-command-release 、 fis-command-server 、 fis-command-install 这三个插件来完成任务。同时,FIS的命令行基于 commander 这个插件构建,熟悉这个插件的同学很容易看懂FIS命令行相关部分源码。
2年前
构建工具
杨文坚 ,首席吹牛工程师 于 2年前发表 1388 0 0
阿里妈妈 @一丝 [http://weibo.com/jieorlin] 准备发布其 CSSGrace [http://yisibl.github.io/share/css-post-processor.html#/1] ,即CSS后处理插件,于是顺便聊聊CSS postprocessors。 从REWORK说起 Rework是TJ大神开发的CSS预处理框架。但为什么会出现呢?TJ大神如此回答: The simple answer is that Rework caters to a different audience, and provide you the flexibility to craft the preprocessor you want, not the choices the author(s) have force on you. Our goal with Rework contrasts the others, as it
2年前
构建工具
杨文坚 ,首席吹牛工程师 于 2年前发表 1245 0 0
UNIX PIPES Unix管道扫描稿 1 [https://cloud.githubusercontent.com/assets/2239584/6735604/23253736-ce9a-11e4-936e-61818fa207a1.jpg] 简单样例: $ netstat -apn | grep 8080 相信这个大家经常使用,这里就不细说了。 那么管道基本思想是什么呢? * 让每个程序只完成一件事,并将其做好( do one thing and do it well ),完成一个新任务,新建一个程序,而不是在旧程序中添加新特性 * 标准化每个程序的输入和输出,让任意符合标准的程序可以串在一起( write programs to work together ) * 设计和创造软件,而不是架构或系统 NODEJS STREAM NodeJS中引入流概念来解决I/O异步问题,如果没有Stream,我们可能要这么写代码: var http = require('http'); var fs = require('fs');
2年前
构建工具