前端自动化浅谈
2017-05-11 00:40

我的前端自动化的认识

近几年,自从nodeJS出来之后,前端发生了很大的变化,各种工程化的工具,自动化工具漫天飞。光是工具的名字就有一大摞,但是到目前为止,我仍然是一个前端自动化的工具都没有使用过。一谈到前端自动化工具,感觉自己在前端行业已经是原始人了,还在自己手动创建项目结构。

前端自动化的学习起步是首先我们要了解他们都是做什么的,能给我们带来什么好处。

首先一个是bower,bower是用来帮我们下载一些js库的,比如jquery,fontAwesome,bootsrap等,它的图标是一只小鸟:

blob.png

在windows下面我们安装了nodejs后,nodejs自带npm包管理工具,通过cmd窗口使用npm安装bower

blob.png

其中的-g是表示在全局安装,然后我们需要用bower安装jquery的话,需要先安装git,bower以来与nodejs,npm,git才能正常使用。

可以先去git官网下载一个git来使用。然后下载了git,我们就可以不使用window的cmd窗口,而可以使用git的窗口来操作。git的窗口在windows下面看起来比cmd的窗口更漂亮一些

blob.png

直接使用,bower install jquery,就可以下载jquery了。然后我们找到对应的目录,就可以看到bower下载的jquery了

blob.png

比如,我们需要在移动页面中用到iscroll滚动插件,那么我们就可以去bower的官网搜索这个插件:

blob.png

搜索到后,我们使用bower下载,同样,为了下载的插件好找到,我们可以使用cd命令切换到我们项目所在的目录,然后再使用bower进行下载

blob.png

这样下载完成后,我们就可以在testFront文件夹下找到iscroll插件了。

blob.png

bower也可以单独用来方便我们下载一些需要的插件,而不必去百度搜索,浪费很多时间看一些标题党的页面。


在一个前端的工具叫yeoman,这个工具用来帮助我们搭建项目的文件结构,生成项目的架构。

blob.png

我的本地已经安装了yeoman了,所以提示这个,yeoman在npm仓库的注册的名字叫“yo”,所以我们使用“npm install -g yo”来安装yeoman。

yeoman提供了很多的“generators”供我们创建对应的项目结构,generators可以理解为生成器的意思。

blob.png

比如,我们使用它的“angular”的generator来创建一个项目。

blob.png

要用yeoman创建一个angular的项目,我们先要使用npm下载这个generator,而在npm仓库中generator对应的名称是,generator-xxx,所以angular对应的generator就是”generator-angular“了。

下载完成之后,我们就可以使用yeoman来生成一个angular项目了,在这个项目生成中yeoman会问几个问题,你可以根据自己的需要进行选择:

blob.png

这样,我们就生成了一个项目了,它把里面的gulp,或者grunt的配置文件的基本内容已经给我们写好了,我们就不需要在写一些gulp的配置文件的代码了。

blob.png

生成的项目结构如上,当然他还包括自动生成了一些配置文件

blob.png

这些配置文件的也是自动给添加上了设置,比如gulpfile文件:

blob.png

这样不但免去了我们编写gulp等配置文件的内容,甚至可以省去了我们对gulp,grunt等的学习,但这不代表你可以不用学习gulp等工具的使用。

在一个就是gulp,grunt,webpack,fis这些工具,他们的用途基本一致,就是对文件的压缩混淆,将sass编译成css,将jade编译成html,将jsx编译成es5的js,将ES6,coffeescript编译成es5的js,将一些图标合并成雪碧图,对图片进行压缩等等。他们是前端自动化的主体。可以监听文件的改变,自动对文件进行编译。这个对于使用react开发项目是必须的,因为react的JSX语法需要编译成es5的js运行。并且这些gulp,grunt,webpack等自带用nodejs实现的web服务器,我们可以不借助后台的java,php而直接可以使用前端自己的服务器来开发调试。

其他的前端工具还有yarn包管理工具等。

总结

本文没有详细讲解前端自动化工具的使用,只是讲述了一些前端自动化工具是做什么用的,这样能让我们对前端自动化工具有一个感性的认识,之后我会在自己的学习工程中,不断写一些前端自动化工具相关的文章。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1465)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1