感谢支持
我们一直在努力

用Gulp构建你的前端项目

前言

前端技术发展日新月异,随着模块化、组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了。就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择。

什么是Gulp

是一个基于 Node.js 流、Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具。

Gulp有什么好处
易于学习使用

通过最少的API(核心.src()、.pipe()、.dest()、.watch()四个),以及代码优于配置的策略,让简单的任务简单,复杂的任务可管理。

快速构建

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作,处理速度传说是grunt的两倍。

高质量的插件

gulp社区拥有足够满足你需求的并且简洁的插件,当然你也可以自己动手写一个!

gulp API

参见 http://www.gulpjs.com.cn/docs/api/

gulp构建
1 准备工作

>安装node客户端
下载网址https://nodejs.org/en/download/

>全局安装npm

npm 是 nodejs 的包管理和分发工具,全局安装 npm install -g

>全局安装gulp

npm install gulp –save-dev

save-dev 这个参数会将插件信息自动更新到 package.json 里,其中的 devDependencies 属性会随插件依赖的安装卸载而改变

2 目录结构

– – gulp

– – – – – -dist  //生产目录

– – – – – -src  //开发目录

– – – – – – – – – js

– – – – – – – – – css

– – – – – – – – – html

– – – – – -node_modules

– – – – – -gulpfile.js

– – – – – -package.json

3 关于package.json

mkdir gulp

cd gulp

在gulp目录下执行 npm init 生成package.json文件

安装相关的依赖包

npm install gulp-uglify gulp-rename gulp-concat gulp-notify .. –save-dev

另外:对于完整的 package.json (比如github上淘下来的项目), 只需对整个项目执行 npm install 即可安装 package.json 文件中声明的所有插件模块

4 实现一个本地服务器

在gulpfile.js文件里,添加依赖包

 

定义根目录变量

 

定义一个task,端口为8888,根目录为开发目录

 

在node命令窗口里执行

gulp server

出现这些说明成功了,这个时候在浏览器里输入localhost:8888即可看到本地开发目录下的文件夹。这样一来就相当于我们传统使用的tomcat服务启动,就可以进行下一部的开发工作了。

 

5. 资源实时更新

开发中我们经常需要按f5刷新页面开效果,那么有了livereload这个插件后,你可以彻底解放你的f5键了。

引入两个依赖

 

创建watch task

watch()是gulp的核心API,这里实时监听开发目录下的html文件,同时依赖reload-dev任务,reload-dev里面实现了connet插件的reload()方法,注意:server一定要设置激活 livereload: true

 

因为gulp task执行的时候并不一定是按顺序的,所以新建一个任务,通过sunSequence插件同步执行上面这两个任务

 

node 控制台执行 gulp live,这个时候去编辑对应的html,按下保存键,即可看到服务reload的日志

 

 livereload实时刷新效果图

6. 压缩js

同样的,也是新建一个task,.src()方法里输入开发环境的目录文件,首先通过.pipe()接口执行stripDebug()方法去掉所有的调试信息,如果uglify()方法里没有带其他参数,默认是不保留注释的,接着用rename插件重命名一下文件,最后通过.dest()接口输出到生成目录下。

 

同样的在node命令窗口里执行

gulp minjs

在dist目录就可以看到多了一个js目录,里面的js全部已被压缩,并且重命名为xx.min.js

7. 压缩css

跟压缩js一样

 

node命令窗口里执行

gulp mincss

在dist目录就可以看到多了一个css目录,里面的css全部已被压缩,并且重命名为xx.min.css

8. 合并js

一个页面通常有多个js或者引入,当上产生环境的时候为了减少网络请求,最好先将资源合并一下,gulp方便快捷的帮助我们完成了这个步骤。

可以看到,合并js是用的concat这个接口,当然首先需要引入gulp-concat

 

task如下,

node命令窗口里执行

gulp concatjs

最终在生产目录下生成了一个concat文件,里面包含了一个合并的main.js

同样的合并css步骤一样,这里不一一叙述。

9. 静态资源添加版本号

前端静态资源缓存一直以来是一个梗,最简单的方式是我们手动去资源后面添加版本号,如果资源一多,那真是个噩梦..  幸好有gulp-rev

首先添加依赖包

 

建立两个task

 

node窗口里执行gulp revCss 、gulp revJs后,对应的css、js目录下分别生成了rev-manifest.json文件。

revCollector插件是根据rev-manifest.json 里面的键值对,再对html进行md5比较,最终将有变化的html进行版本更新

建立处理html task

 

运行gulp revHtml后,会发现生产目录下的html文件引用的js/css自动添加的版本后缀

当然,后续更改了相关js/css后,需要再执行revCss和revJs,所以这里也通过一个集合task有序的执行上面三个任务

 

 效果图

有一点需要注意,我们通常期望添加的版本号是这样子

 

可是gulp-rev默认类似是这样 common911965ed05.js,是再重新生成了一个js文件,随着越来越多的版本更新,文件越来越多,显然不合适,那么为了达到期望的效果,需要对其源码做如下相关的修改:

打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

打开nodemodules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + ‘-‘ + hash + ext; 更新为: return filename + ext;

打开node_modules\gulp-rev-collector\index.js 31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ” ) !== path.basename(key) ) { 更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?’)[0] !== path.basename(key) ) {

本文永久更新链接地址:http://www.linuxidc.com/Linux/2016-12/138658.htm

赞(0) 打赏
转载请注明出处:服务器评测 » 用Gulp构建你的前端项目
分享到: 更多 (0)

听说打赏我的人,都进福布斯排行榜啦!

支付宝扫一扫打赏

微信扫一扫打赏