用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) ) {
dome地址 https://github.com/helijun/gulp
用gulp构建你的前端项目的更多相关文章
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- [转]gulp构建前端工程
摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
- 用gulp替代fekit构建前端项目
https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...
- 基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...
- Gulp构建前端自动化项目
类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
随机推荐
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- web前端基础知识-(四)DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- QT下调试基于ros的catkin项目
1.首先告诉qt ros的搜索路径,通过修改qt creator 桌面启动程序来实现 sudo gedit ~/.local/share/applications/DigiaQtOpenSour ...
- marked.js简易手册
marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...
- fineui刷新父页面
protected override string AfterAddJS() { //TODO 重载这2个函数 可以控制新增和编辑之后执行的JS return AfterSaveJS_ReloadDa ...
- C#中POST数据和接收的几种方式(抛砖引玉)
POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[" ...
- 美团HD(1)-设置导航栏主题
自定义一个UINavigationController DJNavigationController.h #import <UIKit/UIKit.h> @interface DJNavi ...
- Java 解决约瑟夫问题
约瑟夫问题(有时也称为约瑟夫斯置换,是一个出现在计算机科学和数学中的问题.在计算机编程的算法中,类似问题又称为约瑟夫环.又称“丢手绢问题”.) 有这样一个故事,15个教徒和15个非教徒在深海遇险必须讲 ...
- 如何使用FileZilla上传和下载文件
一.使用FileZilla上传文件 1 打开 FileZilla 按照如下图所示,填写远程 Linux 的 IP ,用户名,密码,还有端口号(默认22) 2 选中左边需要上传的文件,然后拖到右边,等待 ...
- PHP 站点相对包含,路径的问题解决方法(include,require)
以前看了,很多框架,基本上很少使用相对路径包含.而一般很多做php web站点,喜欢用相对路径. 认为这样,无论目录放到那里. 只要跟另外目录关系一致.那么就不会出现问题.如果一个站点,一般都认为,如 ...