一、简介
gulp是前端开发过程中,自动化构建工具。不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。
gulp是基于Nodejs的自动任务运行器,她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
在实现上,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。
二、gulp环境搭建
链接文章:gulp官方文档
1、安装nodejs
- 安装方式: 打开nodejs官网(https://nodejs.org/en/),下载所需版本(.msi文件)。
如果想要全局范围内使用,可以将其配置到环境变量path中。(环境变量配置)
-
安装成功验证方式:打开cmd命令行或者终端,命令node -v可以查看node版本号;因为现在npm集成到node里,所以不用安装npm就能查看npm的版本信息,同样命令npm -v。
-
npm: 是Node.js的包管理工具(package manager)。
大师兄说,在Node.js上开发时,会用到很多别人写的JavaScript代码。如果需要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。
更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。
2、安装cnpm
链接文章:淘宝 NPM 镜像
npm从国外服务器下载文件(比如插件),但是受网络影响,下载过程中可能出现异常导致下载失败。
其实我们可以下载淘宝团队整理在国内服务器的文件(http://npm.taobao.org);
-
安装命令:npm install cnpm -g --registry=https://registry.npm.taobao.org
-
执行方式:cnpm跟npm用法一致,执行命令时将npm改成cnpm即可。
-
安装成功验证方式:cnpm -v
3、全局安装gulp
-
安装 gulp 命令行工具:cnpm install gulp -g
-
查看版本号:gulp -v
三、gulp的简单使用示例
(1)创建项目目录并进入
(2)在该目录下创建配置文件package.json文件
cnpm init 该命令将指引你设置项目名、版本、描述信息等
cnpm help package.json 该命令查看package.json帮助文档
比如一个package.json文件内容:
{
"name": "gulptest", //项目名称(必须)不能有大写
"version": "0.0.1", //项目版本(必须)
"description": "这是一个gulp的测试程序", //项目描述(必须)
"homepage": "", //项目主页
"main": "index.js", //入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ //关键词
"gulp"
],
"author": "wuxunxun007", //作者
"license": "ISC" //项目许可协议
"devDependencies": { //项目依赖的插件(重要),如果插件安装了,该插件会被自动添加在这儿
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
(3)安装 gulp,作为开发时依赖项
cnpm install gulp --save-dev
安装完成后,就会在项目目录下产生一个node_modules文件
(4)此时最好再次检查gulp版本,应该有命令行gulp版本以及本地gulp版本
gulp --version
(5)在项目根目录下创建一个名为 gulpfile.js 的文件,在这个js文件中写上js代码,就可以使用。
(6)在项目根目录下执行 gulp 命令:gulp 或者是 gulp 任务名 或其他方式,就可以查看执行后的结果。
四、gulp 实现的最常见的功能
gulp 最常见的4个API :src dest watch task
案例1:复制单个文件
将一个.html文件复制到另一个目录下:
var gulp =require("gulp");
gulp.task("_copy",function(){
gulp.src("./src/source.html").pipe(gulp.dest("./dest/"));
});
在命令行末执行 gulp _copy ,能看到原来dest这个文件夹是空的,现在有了从src文件夹复制过来的文件source.html,说明复制成功。
案例2:复制全部文件
要复制项目的 所有文件 和 文件夹(包括子文件夹,不管有多少级)有两种方式:(xx/** 代表所有目录 xx 下的所有目录)
“./**/*”
当前路径用 “.” :“*/**/*”
把项目目录下的所有文件都进行拷贝:
var gulp =require("gulp");
gulp.task("_copy",function(){
gulp.src("./src/**/*").pipe(gulp.dest("./dest/"));
});
把src里面的所有文件,不管有多少级都给复制到dest文件里面了。
开发目录与部署目录的区别:查
链接知乎:大公司里怎样开发和部署前端代码?
案例3:watch监听
实现的功能是,_src目录下的source.html文件发生改变时,自动执行后面的任务,将gulpfile.js所在文件夹中的所有内容拷贝到目录文件下。
gulp.task("_watch",function(){
gulp.watch("./src/source.html",function(){
gulp.src("./**/*").pipe(gulp.dest("./dest/"))
})
})
当然,对watch()的使用一般以解构方式,但是gulp.watch()无法监听到新增加的文件,这样一来,我们每次增加文件时都要执行gulp命令来重启服务。这并不是我们希望的结果,可以引入gulp-watch模块解决这个问题。
五、gulp的插件
gulp本身只做一些文件的拷贝,监视等,但是它提供了很多的接口,由插件完成更多对应的任务。如:js文件的编译,合并文件,压缩文件,优化图片的尺寸,创建本地的开发服务器。下面介绍一些常用插件,其他可以查找官方文档。
1、插件安装命令,moduleName代表所安装插件模块:
- npm install moduleName 安装模块到项目目录下;
- npm install -g moduleName -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置;
- npm install -save moduleName -save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖;
- npm install --save-dev moduleName --save-dev 的意思是将模块安装到项目目录下,并作为开发依赖保存到 packsge.json 中的 devDependencies节点中。
2、合并文件:
安装命令:cnpm install gulp-concat --save-dev
var gulp =require("gulp");
var concat=require("gulp-concat");
gulp.task("_concat",function(){
gulp.src(["./js/a.js","./js/b.js"]).pipe(concat("concat0.js")).pipe(gulp.dest("./dest"));
})
gulpfile.js所在项目目录下新建一个js文件下,写两个文件,分别命名a.js、b.js;
然后终端运行 gulp _concat 命令,然后打开看dest文件夹里新出现了一个文件concat0.js文件,打开,查看,已经将之前js文件夹里的两个js文件的内容合并在concat0.js里了。
3、压缩文件:删除多余的空格
先安装插件uglify:cnpm install gulp-uglify --save-dev
var gulp =require("gulp");
var uglify=require("gulp-uglify");
gulp.task("_uglify",function(){
gulp.src("./js/a.js").pipe(uglify()).pipe(gulp.dest("./dest/"));
})
原来的a.js是以第一幅图片的格式写的,但是压缩完成后,目标文件夹中的a.js则是压缩后去掉多余空格的格式。
4、结合示例:合并,压缩,重命名
装插件rename:cnpm install gulp-rename --save-dev
var gulp =require("gulp");
var concat=require("gulp-concat");
var uglify=require("gulp-uglify");
var rename=require("gulp-rename");
gulp.task("_together",function(){
gulp.src(["./js/a.js","./js/b.js"])
.pipe(concat("tools.js"))
.pipe(uglify())
.pipe(rename("tools.min.js"))
.pipe(gulp.dest("./dest/"));
})
在终端执行命令:
这两张是js文件里面的原始文件:
当合并、压缩、重命名完成后,现在是完成后的效果:
5、压缩css:
安装插件:cnpm install gulp-minify-css --save-dev
var gulp =require("gulp");
var minfyCss=require("gulp-minify-css");
gulp.task("_minfyCss",function(){
gulp.src("./css/reset.css").pipe(minfyCss()).pipe(gulp.dest("./dest"));
})
这是原来的css格式:
这是压缩后的css格式,很明显,空格什么都都没有了:
6、压缩图片:
安装插件:cnpm install gulp-imagemin --save-dev
var gulp =require("gulp");
var imageMin=require("gulp-imagemin");
gulp.task("_imageMin",function(){
gulp.src("./img/**/*")
.pipe(imageMin())
.pipe(gulp.dest("./dest/image/"))
})
执行gulp任务:
图片被压缩到目标文件夹了:
7、将ES6转换为ES5:
为什么要转换成es5?
- es6语法以及提供的强大api给前端带来了很大便利,可是部分浏览器无法识别es6语法。
- 而gulp-ugilfy无法压缩es6,如果代码有使用es6的语法,则压缩会失败。
- 所以在打包的时候,我们有时需要将es6编译成es5。
安装插件:
cnpm install --save-dev babel-preset-es2015
cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env
var gulp =require("gulp");
var babel=require("gulp-babel");
gulp.task("_es65",function(){
gulp.src("./js/QueryString.js")
.pipe(babel({presets:['es2015']}))
.pipe(gulp.dest("./dest/"));
})
执行命令:执行成功
转换前:es6
转换后,es5
六、常见问题
Pipe就是管道
- gulp.src() 读取将要处理的文件,即源文件。
- pipe() 管道,如何处理该文件(如:sass编译,复制文件,压缩文件等)。
- gulp.dest() 处理后的文件的路径,即目的文件。
cannot find module
如果出现了cannot find module ’插件’,表示该模块没有安装成功;
解决:执行cnpm install gulp ‘插件’ --save-dev,就可以单独安装该模块。
例如:
说明模块glob-watcher没有安装成功;
执行以下命令安装设备依赖:cnpm install gulp glob-watcher --save-dev
如下图:
正在进行的项目如何用gulp:
- 新建空文件夹作为项目的文件夹(不要用gulp作为项目文件夹)
- 用npm初始化项目:用npm init命令产生package.json文件(或 cnpm init)
- 本地安装gulp,安装完命令行工具及设备依赖后,会生成node_modules文件夹
- 把项目目前的所有文件拷贝的到新建的项目文件夹里
- 在项目根目录下写gulpfile.js的代码
- 执行
package.json 配置文件
之前我们cnpm init创建的package.json配置文件,当我们安装插件成功后,就会在该文档中自动添加依赖说明,比如设备依赖,如下:
package.json
{
"name": "20200702",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^4.0.2",
"gulp-babel": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2"
}
}
能看到devDependencies中添加了很多插件名称。