FIS-pure 纯前端工程化入门

##入门前的准备

###掌握一点命令行基础

你一定听说过DOS,DOS是一个命令行操作系统,有很多命令行操作方法,在现今的GUI操作系统里依然可用的。

下面只介绍我们最常用的几个操作命令,更多的命令就需要大家日后去勤奋自学了。

如果你对命令行操作已经有了一定的基础,那么可以略过此章节。

####dir / ls +文件夹路径

列出当前文件夹下的所有文件

dir是windows下CMD命令行工具,ls是苹果MAC操作系统里的命令行方法,功能一样的,请大家对号入座

dir或ls后面还可以加文件夹路径,显示文件夹路径里的所有文件,如: dir d:/test ,显示D盘test文件夹下的所有文件。

####cd +文件夹路径

切换到某个文件夹下,比如我们要切换到D盘的test文件夹,cd d:/test ,返回至上一层目录:cd .. ,返回到根目录cd /,这几个常用命令请牢记。

####cd 的小技巧

cd 或rm之类的需要选取文件名的操作,可以不必敲出文件名的全称,它其实自带有一个搜索功能,比如我们要选取一个文件名叫test_abcsefg.js的文件,不需要全部cd +全名,可以这样操作:cd te再按下tab键盘,命令行就会自动帮你补全名字了。

####rm +文件名 删除文件

删除文件

比如删除一个当前文件夹下test.js的文件,命令:rm test.js,也可以删除任意位置的文件,如:rm d:/abc/test.js

删除文件夹下的所有文件,可以用通配符,如命令:rm ,注意:当前文件夹或指定文件夹下不能有子文件夹,不然操作会失败,提示错误

####mkdir +文件夹名称

新建文件夹

操作命令,如:mkdir test,在当前目录下新建一个名叫test的文件夹。

####rmdir +文件夹名称

删除文件夹

操作命令,如:rmdir test,在当前目录下删除一个名叫test的文件夹。注意:要删除文件夹,必须先保证文件夹为空,如果不为空,请先删除文件夹下的所有文件再做删除文件夹操作

####pwd

查看当前目录的路径

常常我们cd到某个文件夹下,操作过多之后就忘记了当前所在的路径,可以用命令行pwd直接查看文件夹的系统绝对路径。

###open +文件夹名

在系统中弹出文件夹窗口

如果你突然不想用命令行操作界面去操作文件了,想打开某个文件夹窗口呢?也可以用简单的命令行操作,如命令行:open test,打开当前文件夹下的test文件夹,试下,是不是直接打开了?减少频繁去用鼠标操作的麻烦。

##搭建前端工程化环境

FIS是百度FEX团队开发的,基于node.js的一套前端自动化工具,它能为我们解决哪些问题呢?

  • 在开发过程中做到浏览器自动刷新(代码监听,代码发布),有效避免了前端工程师写一样样式手动刷新下浏览器的麻烦
  • 项目自动发布。可以发布到本地,也可以发布到远程服务器,只需要简单的一个命令
  • 代码自动添加版本号
  • 自动检查代码
  • 代码自动化测试
  • 代码自动打包
  • 代码自动压缩
  • 模块化开发
  • 自动性能优化
  • icon图片自动合并

根据配置安装的FIS插件,可以扩展更多的功能,提升前端码农的生产效率

###让我们首先来安装node.js环境吧

很简单,请打开链接http://nodejs.org,点击INSTALL按钮,网站会判断你是windows系统或MAC系统提供你对应的安装版本,下载后直接安装。

###安装fis-pure

在此先介绍下npm,npm是一个资源库,类似于苹果的APP商店,官方的node.js已经集成了npm安装包,已经自动安装,可以直接操作npm。

在npm的资源库里已经存在了fis-pure的安装包,我们可以输入命令:npm install fis-pure -g,如果你用的是MAC,可能系统会提示你权限不够,那么就要提升到管理员权限,npm命令前增加sudo命令:sudo npm install fis-pure -g,如果弹出窗口要求输入管理员用户名和密码,请按照要求操作。OK,安装完成了!

fis-pure已经安装到node的全局环境里了!

fis-pure是基于fis做了一层封装,是一套纯前端的工程化方案,都是基于pure的命令行操作

###我们用工程化的方式开始开发项目吧

####构建项目

再次运行FIS构建项目

资源压缩 –optimize 简写 -o

增加MD5版本号 –md5 简写 -m

项目打包 –pack 简写 -p

3个命令合并简写:fis release -omp 开启服务器,刷新浏览器即可看到


未完待续……