npm、fis构建

亦凉 2022-05-31 23:50 336阅读 0赞

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

# 安装Node和NPM #

node中文网：[http://nodejs.cn/][http_nodejs.cn]

node英文网：[https://nodejs.org/][https_nodejs.org]

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

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

![format_png][]

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

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

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

1.  在nodejs主文件目录（例如D:\\Program Files\\nodejs\\）下建立一个node\_global和一个node\_cache文件夹；
2.  分别运行如下两条命令：
3.      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` 判断是否安装成功，如果安装成功，则显示类似如下信息：![format_png 1][]

# 安装Gulp和del模块 #

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

1.  进入项目的webapp目录；
2.  按住`shift` + 鼠标右键，打开命令行；  
    此时应该在这个目录：
3.  ![format_png 2][]
4.   
    
    1.  命令行输入：
    
        npm install --save-dev gulp del
    
     
    
    # 安装fis-parser-jdists插件 #
    
    用来在生产发布时把不必要的代码清除，可以利用这个功能来给测试环境和生产环境配置不同的settings；
    
        npm install fis-parser-jdists -g
    
     
    
    此时项目的目录结构应该是这样的：
5.  这里有三种模式
    
    开发：
    
    平时我们开发用的模式，会自动跟踪文件变动，然后根据配置规则生成文件：
    
        //进入项目的“webapp/src”目录 fis3 release debug -w -d ../
6.   
    
    测试：
    
     
    
    测试环境用的模式，会把所有文件进行构建：
    
        //进入项目的“webapp/src”目录 fis3 release -d ../
    
    发布：
    
    需要发布上线的时候用的模式，会把所有文件进行构建，并且设置生产专用的settings：
    
        //进入项目的“webapp/src”目录 fis3 release prod -d ../
    
    # 注意 #
    
    我们项目现在对于文件的版本控制是使用文件名＋hash的模式，如：
    
        common_ba2ds3.js
    
    上面的开发模式和发布模式都会生成这种格式的文件，当你一个项目跑久了以后，项目的dist目录下会有很多同一个文件名但不同hash的重复文件，如：
7.  ![format_png 3][]
8.   
    
     
    
    这时你可以先删除整个dist的目录的内容，然后重新构建一遍就可以了：
9.      //删除dist目录可以手动硬删，或者使用gulp命令去删： //进入项目的“webapp/src”目录，删除dist目录 gulp clean //重新构建 fis3 release debug -d ../
    
    # 开发目录 #
    
    现在`webapp/src`为开发目录，生成的静态资源如果是html会自动编译到`webapp/WEB-INF`的`templates`下面，其他静态资源文件会编到`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

[http_nodejs.cn]: https://link.jianshu.com/?t=http://nodejs.cn/
[https_nodejs.org]: https://link.jianshu.com/?t=https://nodejs.org/
[format_png]: /images/20220601/5e3ca828ec034ddd87e6d4b222f2b984.png
[format_png 1]: /images/20220601/9032604400b546bab0ff44aede02dc00.png
[http_www.gulpjs.com.cn]: https://link.jianshu.com/?t=http://www.gulpjs.com.cn/
[format_png 2]: /images/20220601/afcd71ae249543a59078c1f080ba3bdb.png
[format_png 3]: /images/20220601/a15876be04a64f2aa030f2cd95768023.png