kams 前端构建

使用fis3、gulp进行构建工作,对各种文件进行压缩、混淆加版本号等。

安装Node和NPM

node中文网:http://nodejs.cn/
node英文网:https://nodejs.org/

fis3的Node 版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x

下载4.x.x或6.x.x版本;

kams 前端构建_第1张图片
Paste_Image.png

不建议安装在c盘。安装完成后,在命令行输入:

node -v //验证node版本
npm -v //验证npm版本

然后配置node目录,上面我们已经安装了node和npm,但npm的全局模块的路径默认是在c盘下的,要改动路径的话进行如下操作:

  1. 在nodejs主文件目录(例如D:\Program Files\nodejs\)下建立一个node_global和一个node_cache文件夹;
  2. 分别运行如下两条命令:
npm config set prefix "D:\Program Files\nodejs\node_global\node_modules"  
npm config set cache "D:\Program Files\nodejs\node_cache"
  1. 配置环境变量
    在系统变量“PATH”,加上
D:\Program Files\nodejs\node_global\node_modules;

在用户变量下新建“PATH”,输入

D:\Program Files\nodejs\node_global;

配置NPM源

由于默认的npm源是在国外,访问会比较慢,所以可以把npm的源设置为淘宝源:
在命令行输入:

npm config set registry http://registry.npm.taobao.org/

安装FIS3

在命令行输入:

npm install -g fis3

安装完成后执行 fis3 -v 判断是否安装成功,如果安装成功,则显示类似如下信息:

kams 前端构建_第2张图片
Paste_Image.png

安装Gulp和del模块

Gulp中文网:http://www.gulpjs.com.cn/
由于fis3不支持删除功能,所以使用gulp+del完成文件的删除功能。

  1. 进入项目的webapp目录;
  2. 按住shift + 鼠标右键,打开命令行;
    此时应该在这个目录:
    Paste_Image.png
  3. 命令行输入:
npm install --save-dev gulp del

安装fis-parser-jdists插件

用来在生产发布时把不必要的代码清除,可以利用这个功能来给测试环境和生产环境配置不同的settings;

npm install fis-parser-jdists -g 

安装nvm模块(可选)

nvm是用来管理node版本的。
具体安装方法:待补充

使用

确保更新到了最新的代码

此时项目的目录结构应该是这样的:


kams 前端构建_第3张图片
Paste_Image.png

这里有三种模式

开发:

平时我们开发用的模式,会自动跟踪文件变动,然后根据配置规则生成文件:

//进入项目的“webapp/src”目录
fis3 release debug -w -d ../
测试:

测试环境用的模式,会把所有文件进行构建:

//进入项目的“webapp/src”目录
fis3 release  -d ../
发布:

需要发布上线的时候用的模式,会把所有文件进行构建,并且设置生产专用的settings:

//进入项目的“webapp/src”目录
fis3 release prod  -d ../

注意

我们项目现在对于文件的版本控制是使用文件名+hash的模式,如:

common_ba2ds3.js

上面的开发模式和发布模式都会生成这种格式的文件,当你一个项目跑久了以后,项目的dist目录下会有很多同一个文件名但不同hash的重复文件,如:

kams 前端构建_第4张图片
Paste_Image.png

这时你可以先删除整个dist的目录的内容,然后重新构建一遍就可以了:

//删除dist目录可以手动硬删,或者使用gulp命令去删:
//进入项目的“webapp/src”目录,删除dist目录
gulp clean
//重新构建
fis3 release debug -d ../

开发目录

现在webapp/src为开发目录,生成的静态资源如果是html会自动编译到webapp/WEB-INFtemplates下面,其他静态资源文件会编到webapp/dist目录下面;所以现在并不能直接改WEB-INF下的html文件了,这点需要注意。

GIT设置忽略

由于WEB-INF现在是构建出来的,而以前git中保留了提交记录,所以要设置忽略的话,要这么做:

//git update-index --assume-unchanged + 文件目录
//先进入项目目录
git update-index --assume-unchanged src/main/webapp/WEB-INF/templates/
git update-index --assume-unchanged src/main/webapp/dist/
//清除git cache
git rm -r --cached src/main/webapp/WEB-INF/templates/
git rm -r --cached src/main/webapp/dist
Paste_Image.png

你可能感兴趣的:(kams 前端构建)