Flow-CLI

Github

概述

快速开始

安装

1. 安装nodejs(>=6.5.0)

2. 安装Flow-CLI:npm install front-flow-cli -g

3. 安装完成,查看版本号:flow -V

使用

flow init

在当前目录初始化一个front-flow-template项目

flow run [configName]

编译当前项目并启动开发服务,实时编译并刷新浏览器,默认加载配置config.json,可指定配置文件名称

flow build [configName]

编译当前项目,默认加载配置config.json,可指定配置文件名称

目录结构

默认模板目录结构如下,其中下划线(_)开头的目录为编译资源,不需要部署到服务器,编译产出文件夹(默认"/dist")和"/modules","/public"需要发布到服务器。

             
  |--_component/                //框架CSS组件
  |-- _src/                     //源码目录
  |    |-- css/
  |    |-- font/
  |    |-- img/
  |    |-- include/
  |    |-- js/
  |    |-- lib/
  |    |-- index.html
  |    |-- seajs.config.js
  |    `-- favicon.ico 
  |-- modules/                  //框架JS插件
  |-- public/                   //公共文件
  `-- config.json               //编译配置
                
          

配置

编译相关的所有配置均在config.json中:

projectDir 项目源码目录,默认"_src"
distDir 编译输出目录,默认"dist",也支持绝对路径,例如E:\\IIS\\frontend\\web

注:当用绝对路径将编译结果输出到项目以外的目录时,modules(模块库)不会拷贝过去,为保证预览效果需要自行拷贝或配置远程模块库

port 开发服务端口号,默认3000
homePage 开发服务起始页面,默认"index.html"
serverRoot 站点部署路径,默认"",即站点根目录
reloadDelay 开发服务刷新延时,默认0,单位ms
rootHolder 源码中引用站点部署路径的占位符
projectHolder 源码中引用项目源码目录的占位符
distHolder 源码中引用产出目录的占位符
UUIDHolder 组件uuid占位符,用于在组件中生成一个随机6位数字字母字符串
checkUpdate 编译前是否检测新版本,默认true
compress 编译时是否压缩代码,默认true
extendsPath 附加监听目录,默认["modules/**"],将自动同步到编译目录(编译路径为绝对值时有效)

编译过程

编译按script => image => font => html => css顺序进行,各环节支持的格式如下,未包含的格式暂不被支持

            
const types = {
    script: 'js,coffee',
    css: 'css,less',
    img: 'JPG,jpg,png,gif',
    html: 'htm,html',
    font: 'eot,svg,ttf,woff'
};
            
        

脚本

脚本编译经过以下流程:

  1. 模块化相关文件合并压缩输出到编译目录/lib/seajs.js,包括:'_src/lib/seajs/sea.js''_src/seajs.config.js''_src/lib/seajs/manifest.js''_src/lib/seajs/seajs-localcache.js'
  2. _src/lib/下的js(除了模块化相关文件)压缩后输出到编译目录./lib
  3. _src/js/中的js输出到编译目录./js

图片

项目内所有图片经过gulp-imagemin插件压缩,输出到编译目录./img

组件

组件定义了一个独立的页面片段,用于在模板中通过组件标签引用,编译过程不会输出(组件脚本除外,详见【模板编译】)

一个组件体现为include/中的一个文件夹,包含模板(temp.html)、样式(style.less)、脚本(script.js),标签语法:

            
<!--=require 组件文件夹名称 (组件模板数据)-->
//示例
<!--=require header-->
<!--=require uploadImg {"val":""}-->
            
        

如果组件标签中包含组件模板数据,那么组件模板(temp.html)会经过_.template渲染,语法见lodash文档

为使组件可以在一个页面中多次调用,组件支持uuid特性,每次调用会生成一个6位随机字符串,组件样式和组件脚本中的uuid会与组件模板中的uuid保持一致,例如可以给节点添加随机且唯一的id,在js中使用id选择器就不会造成混淆

字体

字体文件源目录输出

模板

模板编译经过以下流程:

  1. 查找组件标签,编译组件模板内容,替换组件标签
  2. 收集组件css内容,模板编译结束后调起css编译程序,届时组件css将编译到最终的style.css中
  3. 收集组件script内容,包装成符合seajs模块规范,如果组件脚本数量大于1,将脚本合并成打包js文件输出到include/,模板页面底部将自动添加js链接,引用同样组件的模板可以复用已打包的脚本;如果只有1个组件脚本,脚本内容将内嵌到模板页面底部;如果该组件使用了uuid,那么该脚本也会内嵌在页面底部,因为uuid的唯一性使脚本失去了复用价值
  4. 替换占位符
  5. 输出到产出文件夹./

注:判断组件css和script个数的依据不是文件存在,而是内容不为空

样式

UI组件存放于_component/_src/css/config.less是less配置文件,_src/css/responsive.less_src/css/resp-midd.less_src/css/resp-smal.less是响应式样式文件,这些文件可以按需在_src/css/style.less中引用,最终编译到产出目录./css/style.css中,不会单独输出到产出文件,他们的修改会触发_src/css/style.less的重新编译;

项目里的其他css文件将按原相对路径输出到产出文件夹。

输出前压缩、加浏览器前缀、替换占位符

社区

博客

前端技术博客

讨论群

361917044

更新日志

加载中...