gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

1. gulp使用步骤

1.1 安装Node.js

参考文章 http://www.cnblogs.com/roddy/p/6524252.html

1.2 全局安装gulp

$ npm install gulp -g

查看是否正确安装。

$ gulp -v

出现版本号表示安装成功。

1.3 安装项目依赖包gulp

我们新建一个项目文件夹"gulp",然后定位到"gulp"文件中

$ cd gulp

1.3.1 了解package.json

在安装项目依赖包gulp之前,我们先来看看package.json文件。

package.json是每个基于Nodejs项目必不可少的配置文件,其中包括项目名称、版本号和所需要的依赖包列表等信息,它是存放在项目根目录中的json文件。

想像一下,如果把项目比作是餐厅中一道菜的话,项目中使用到的依赖包就是这道菜的食材,而package.json文件就是这道菜的食材列表,那么package.json存在的作用是什么?我想最主要的作用就是方便管理项目,用过github童鞋都知道,多人协同工作的时候经常会使用pull和push,由于package.json存在,我们就不需要对项目依赖纳入版本管理,只需要管理package.json就行了,然后根据package.json本地构建项目依赖。

基于命令行创建package.json文件

$ npm init

然后根据提示输入。

package.json基本格式(注意:实际json文件中是不允许出现注释的!)

javascript

{

"name": "gulp", //项目名称(必须)

"version": "1.0.0", //项目版本(必须)

"description": "This is gulp project !", //项目描述(必须)

"homepage": "", //项目主页

"repository": { //项目资源库

"type": "git",

"url": ""

},

"author": { //项目作者信息

"name": "roddy",

"email": "xxxxx@.com"

},

"license": "ISC", //项目许可协议

"devDependencies": { //项目依赖列表

"gulp": "^3.8.11"

}

}


当然,你也可以直接在项目根目录中创建package.json文件,然后复制上面配置代码进去。OK! 现在"gulp"项目中只有一个"package.json"文件,那么我们要怎么安装项目依赖包gulp呢?其实我们"package.json"中"devDependencies"字段已经列出了"gulp"包,我们只需要根据"package.json"来安装依赖就可以了,或者用npm来安装依赖。 ### 1.3.2 根据package.json安装gulp依赖 `$ npm install` ### 1.3.3 npm安装gulp依赖 `$ npm install gulp --save-dev` 细心的你会发现,我们前面已经全局安装过了gulp,这里为什么还要项目安装一次gulp?全局安装gulp是让我们能使用gulp命令行,项目安装gulp是让项目能引用gulp模块! ## 1.3.3 创建gulpfile.js gulpfile.js为gulp项目的配置文件也是我们的任务文件,我们使用gulp对文件进行压缩、打包这些任务就是写在gulpfile.js文件中。 我们在"gulp"项目根目录中创建一个js文件"gulp.js",代码如下:
```javascript // 引入依赖gulp
var gulp = require( 'gulp' ); // 创建一个'default'任务
gulp.task( 'default', function() {
// 将你的默认的任务代码放在这
} );

1.3.4 运行任务

用全局gulp来运行gulpfile.js中的任务(全局安装gulp才能使用gulp命令,如果没有全局安装,这里会报错!)

$ gulp

或者执行指定的任务。

$ gulp <taskname>

默认的名为"default"的任务(task)将会被运行,在这里,这个任务并未做任何事情。

2. gulp API

好了,了解gulp大致的工作步骤后,有必要我们来学习下gulp中的API,这样你才能根据自己需求写gulpfile.js。

2.1 gulp.task( name[, deps], fn )

创建一个gulp任务

name : [String] 任务名称,中间不要有空格。

deps : [Array] 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

fn : [Function] 任务的回调函数,任务具体代码。

gulp.task( "taskname", [ "task1", "task2", ... ], function() {
// 将你的任务代码放在这
} );

2.2 gulp.watch( glob[, opts], tasks )

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个EventEmitter来发射(emit)事件

glob : [String/Array] 监视的文件路径或者文件路径数组。

opts : [Object] 传给依赖包gaze的参数。

tasks : [Array] 需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

gulp.task( "task1", function() { console.log( "gulp" ) } );
gulp.task( "default", function() {
gulp.watch( "xx.js", [ "task1" ] );
} );

2.3 gulp.watch( glob[, opts, cb] )

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个EventEmitter来发射(emit)事件

glob : [String|Array] 监视的文件路径或者文件路径数组。

opts : [Object] 传给依赖包gaze的参数。

cb : [Function] 每次变动需要执行的回调函数,该函数被传入一个事件对象event。

├─event.type : [String] 变动类型,"added"、"changed"、"deleted"。

└─event.path : [String] 触发该事件的文件路径。

gulp.task( "default", function() {
gulp.watch( "xx.js", function( event ) {
console.log( event.path + "is" + event.type );
} );
}

2.4 gulp.src( globs[, options] )

匹配要处理的源文件路径,并且返回一个stream它可以被piped到别的插件中

globs : [String|Array] 匹配glob模式的文件路径或者文件路径数组。

├─* : 匹配任意文件名。 例:src/*.js <=> src中所有js文件

├─** : 匹配0个或多个文件夹。 例:src/**/*.js <=> src中0个或多个文件夹中的js文件

├─{} : 匹配多个属性。 例:src/*.{js,css,html} <=> src中所有js,css,html文件

└─! : 排除文件。 例:!src/a.js <=> 不包含src中的a文件

options : [Object] 三个可选配置

├─options.buffer : [Boolean] 默认 true,设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用。

├─options.read : [Boolean] 默认 true,设置false,将不执行读取文件操作,返回null。

└─options.base : [String] 默认 glob通配符之前的路径,最后替换掉base来得到输出文件路径。

假如我们src目录中有一个文件夹js,其中有一个test.js文件

gulp.task( "default", function() {
// 匹配文件"src/js/test.js", 并且把options.base解析为"src/js"
gulp.src( "src/js/*.js" )
// 用"dist"替换掉base路径,并写入该文件"dist/test.js"
.pipe( gulp.dest( "dist" ) );
} ); gulp.task( "task1", function() {
// 匹配文件"src/js/test.js", 并且把options.base设置为"src"
gulp.src( "src/js/*.js", { base : "src" } )
// 用"dist"替换掉base路径,并写入该文件"dist/js/test.js"
.pipe( gulp.dest( "dist" ) );
} );

2.5 gulp.dest( path[, options] )

能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它

path : [String|Function] 文件将被写入的路径(输出目录)。也可以传入一个函数,在函数中返回相应路径。

options : [Object] 两个可选配置。

├─options.cwd : [String] 默认 "options.cwd()",输出目录的 cwd 参数,只在所给的输出目录是相对路径时候有效。

└─options.mode : [String] 默认 "0777",八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。

3. 基于gulp的插件

前面介绍了"gulp"怎么安装使用以及"gulp"的API,但是"gulp"到底是怎么样对文件进行压缩、合并等操作的呢?其实"gulp"要完成这些操作,靠的就是基于它的一些功能插件,利用这些插件来对文件进行操作,下面我们就介绍几种常用的插件。

3.1 CSS文件压缩

插件 : gulp-clean-css

Github : https://github.com/jakubpawlowicz/clean-css

3.1.1 本地安装

$ npm install gulp-clean-css --save-dev

3.1.2 使用

创建gulpfile.js

var gulp = require( 'gulp' );
var cleanCss = require( 'gulp-clean-css' ); gulp.task( "default", function() {
// 读取"src"中的所有css文件
return gulp.src( "src/*.css" )
// 压缩css文件
.pipe( cleanCss() )
// 写入"dist"文件夹中
.pipe( gulp.dest( "dist" ) );
} );

运行gulpfile.js中的任务

$ gulp

3.2 静态资源增加版本号更新文件引用

插件 : gulp-rev、gulp-rev-collector

Github : https://github.com/sindresorhus/gulp-rev

Github : https://github.com/shonny-ua/gulp-rev-collector

首先静态资源增加版本号发布这些牵扯到前端工程化问题,之于前端工程化,我这里不想过多解释,这里有篇讲解前端工程化的文章链接:https://www.zhihu.com/question/20790576

基本原理就是当静态资源发生版本更新后,用户浏览器会主动放弃缓存中的静态资源,从服务器拉取最新资源加载,而那些没有更新的静态资源文件则使用浏览器缓存,这样的好处就是既能提高用户访问网站的速度提升用户体验,还能减轻网站服务器压力。

要想达到这样的目的有两种思路:

非覆盖式发布:根据静态资源内容生成hash值,然后与文件名拼接生成新的静态资源文件,最后更新页面中静态资源引用路径。

这种方法需要注意的是,先上更新后的静态资源,再上页面文件。如果先上页面文件,页面中引用的静态资源路径是添加版本号的静态资源,由于服务器中不存在该版本号的静态资源,这个时候旧版页面加载不存在的静态资源就会导致页面布局错乱甚至报错。

这种方法的缺点也非常明显,每更新就会生成一次带版本号的静态资源文件,这样冗余的静态资源过多,所以需要自己定时清理掉老版本的静态资源。目前大公司一般都是使用这一种方法对静态资源进行版本迭代。

覆盖式发布:根据文件内容生成hash值,然后对引用该静态资源文件的模板链接增加版本参数。

这种方法不管是先上页面还是静态资源,都会导致用户访问页面的时候出现问题,如果先上页面,新版页面加载旧版静态资源,导致页面布局错乱;如果先上静态资源,那些有旧版静态资源文件缓存的用户不会收到影响,但是新用户访问旧版页面加载的是新版静态资源,这样还是会导致页面布局错乱等问题,所以如果一定要使用这种方法,那么最好是在页面访问量少的时间段先上静态资源文件,再上页面,当然这种方法比第一种方法的好处就是不会生成冗余的静态资源。

var gulp = require( 'gulp' );
var rev = require( 'gulp-rev' );
var revCollector = require( 'gulp-rev-collector' ); gulp.task( "default", function() {
return gulp.src( "src/*.js" )
// 生成带hash版本号文件
.pipe( rev() )
// 保存新文件
.pipe( gulp.dest( "dist" ) )
// 生成新旧文件名对应的json文件
.pipe( rev.manifest() )
// 保存json文件
.pipe( gulp.dest( "dist" ) );
} );

参考资料:

http://www.ydcss.com/archives/424

http://www.gulpjs.com.cn/docs/getting-started/

gulp --- 前端自动化构建工具的更多相关文章

  1. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  2. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  3. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  4. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

  5. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  6. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  7. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  8. gulp前端自动化构建并上传oss

    前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gu ...

  9. gulp——用自动化构建工具增强你的工作流程

    想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...

随机推荐

  1. mybatis表名反射实体

    package com.eshore.wbtimer.executor.service.impl; import com.baomidou.mybatisplus.mapper.EntityWrapp ...

  2. openpyxl的使用记录

    脚本功能描述: 读取指定文件夹内的.xlsx文件,遍历提取整理信息保存到另一指定文件夹中 import openpyxl import os import shutil city='城市名' def ...

  3. c++程序猿经典面试题(2)

    1.以下程序的输出结果是? #include<stdio.h> main(){ int b=3; int arr[]={6,7,8,9,10}; int *ptr=arr; *(ptr++ ...

  4. Cookie学习笔记二:Cookie实例

    今天说说刚刚学到的两个Cookie的最经典应用:自己主动登录和购物车设置 一:自己主动登录 须要两个页面:login.jsp与index.jsp,login.jsp用来输出登录信息,index.jsp ...

  5. HDU 4403 A very hard Aoshu problem (DFS暴力)

    题意:给你一个数字字符串.问在字符串中间加'='.'+'使得'='左右两边相等. 1212  : 1+2=1+2,   12=12. 12345666 : 12+3+45+6=66.  1+2+3+4 ...

  6. Codeforces 569 B. Inventory

    click here~~ **B. Inventory** time limit per test1 second memory limit per test256 megabytes inputst ...

  7. 笔记12 export to excel (NPOI)

    1:filestream 熟悉关于文件操作 ==>fs.Seek(0, SeekOrigin.Begin);//每次打开文件, ==>若果重写覆盖的话,必须先清空 fs.SetLength ...

  8. svn 版本管理与自动部分发布(转)

    作为团队开发项目时,会遇到项目的版本管理,测试部署与发布部署,下面是摘至他人的关于版本管理和自动部署的方案. svn自动部署的实现: 使用svn的hook功能 1.在版本库的hooks目录下面,有一些 ...

  9. php源码zend_do_begin_namespace函数详解

    version:5.6.21 file:Zend/zend_compile.c line:7055-7152 void zend_do_begin_namespace(const znode *nam ...

  10. linux环境下安装的activemq的输出日志

    activemq输出日志的位置: activemq/data/activemq.log 查看activemq.log文件即可.