关于Glup_gulp使用教程

大家好，又见面了，我是你们的朋友全栈君。

gulp —-项目工程化的工具

一，作用： (1) 能够完成代码的压缩 (2) 合并，复制，监听，ES6的代码转换，启动服务器等等

二，gulp 使用步骤： 搭建环境 (1)安装nodeJS (2) 安装node的目的是为了测试npm （npm是nodeJS的包管理工具全称：nodeJS Package Manager）使用npm的原因： a.如果一个项目中使用的第三方js代码非常多，意味着，我们需要在不同的网站下载不同的js代码（js库），非常麻烦，而且，如果js代码之间互相有依赖，那么还需要把依赖的js下载下来。 b.所以Npm把所有第三方js库收集在一起，放在npm的服务器上，这样，程序员每次下载时，统一从npm下载。而且，npm还可以管理js之间的依赖关系。一个包就是一个js库。所以，nodeJS Package Manager（npm）就是nodeJS专门管理js库的一个工具。

搭建gulp环境步骤

一. 打开cmd命令行 2.输入 node -v 3.输入 npm -v 4. npm install gulp -g //安装全局gulp 5.Gulp -v //测试是否安装gulp 6.本地安装gulp 进入项目目录（如：D:gulpprj）随后在项目目录在输入cmd命令行输入npm init //生成package.json 随后一路回车，此时在项目中有一个package.json的文件 7.输入 npm install gulp –save-dev //表示安装成功随后在项目中产生 node_moudles 的文件

二

在开发目录下建立文件 “gulpfile.js”，记住：这个文件一定是放在项目根目录下。不要放在项目的其它子文件里，文件名就是“gulpfile.js”，不要乱起。在gulpfile.js中实现如下代码： **

① 复制文件：**

（其中 const 相当于int 定义变量）

随后在 cmd 命令行中输入 gulp opy -html ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200203192159522.png

*③ 压缩js文件：**

Gulp本身只能完成复制文件，监听文件等简单功能，如果要完成更多的功能，gulp提供很多接口，可以使用插件压缩js文件，就需要 gulp-uglify 插件。 在cmd命令行输入 npm install gulp-uglify –save-dev //安装 gulp-uglify 插件

随后在gulpfile.js的文件中输入如下（即将插件引入）

***随后在cmd中输入 gulp copy-html 然后输入 gulp uglifyjs

缺点：复制html文件压缩js文件的方法在每次更改代码都要运行如上两条命令，过于繁琐，因此采用监听文件的方法（每次改动文件都会自动拷贝和压缩） **

② 监听文件：使用watch

随后在cmd中输入 gulp watchall

待修改代码后则一直会监听

④ 合并js文件

使用gulp-concat 插件，把若干个小js文件合并成一个大的js文件，可以减少http的请求（提高项目的性能）。 在cmd中输入 npm install gulp-concat –save-dev //安装gulp-concat 插件

随后在gulpfile.js的文件中输入 const concat = require(“gulp-concat”);

随后如果要合并index.js和tools.js两个文件则继续在gulpfile.js的文件中输入如下所示（接着上面的启动监听）

若要压缩则如上所示，在合并后进行压缩，在合并的文件common.js若再次更改，则继续压缩执行.pipe(uglify()） 随后在cmd命令行输入 gulp watchall 进行监听

⑤ 重命名（js文件）

使用gulp-rename 插件 在cmd命令行输入 npm install gulp-rename –save-dev //安装gulp-rename 插件

待安装完成后在gulpfile.js的文件中输入const rename = require(“gulp-rename”);

后继续在gulpfile.js的文件中输入如下所示（接着上面的合并）

随后再次启动监听 在cmd命令行输入** gulp watchall

⑥ 压缩css

使用Gulp-minify-css 插件 在cmd命令行中输入 npm install gulp-minify-css –save-dev //安装Gulp-minify-css 插件待安装成功后在gulpfile.js的文件中输入const minifycss = require(“gulp-minify-css”) （继续在重命名js文件下添加）