gulp的作用，安装，使用

1.gulp是什么？
Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。例如：网页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。

2.为什么使用gulp？

（1）JavaScript和CSS更改后需要手动清除缓存

JavaScript和CSS属于静态文件，如果项目地址不变，浏览器会缓存这些文件，那就意味着当我们修改JS或者CSS文件的时候，发现需要清除一下缓存（ctrl+shift+delete），才能看到真实的效果。

（2）JavaScript和CSS多个文件执行顺序

我们经常会遇到一些样式没有起作用，很多情况是因为css引入的顺序造成的，这就需要一个工具去管理CSS和JS，而使用构建工具就可以减少类似的问题出现。

（3）性能优化

浏览器请求的文件越多越大越耗时，一般我们为了更好的用户体验，优化网站性能是必不可少的，前端一般的做法是静态资源合并和压缩。而所有的前端构建工具都会有文件压缩和合并的功能。

（4）效率

由于H5和CSS3中有一些新特性，有些浏览器可能不兼容，我们一般会用不同的前缀，来解决兼容性问题，但手工添加就比较繁琐；另外，js很多时候会有一些潜在的bug,比如忘了写分号，变量没有声明却赋值了，而使用一些JS代码分析工具，可以很好的帮我们检查一些常见的问题；还有就是，前端的一些js和css库更新迭代比较快，像Jquery,如果版本升级，添加移除等用手工修改的话，第一比较耗时，第二容易遗漏，那么使用前端构建工具可以很好的解决这些问题。

3.gulp可以做：

编译 sass
合并优化压缩 css、js
Html的include功能
优化图片
添加文件指纹（md5）
ESLint
组件化头部底部（include html）
实时自动刷新…
去缓存

4.安装

gulp的安装是基于node，所以在安装gulp之前要先查看有没有安装node，没有则先安装node

（1）输入node -v 查看node版本；npm -v查看npm版本；

（2）安装gulp，使用国内淘宝镜像全局安装gulp（这样不会出现Local version报错或unknown）

npm install -g gulp

npm install --save-dev gulp

（3）输入命令行gulp -v来查看gulp是否安装成功！

5.使用

（1）创建工程目录；

（2）cd到工程目录下；

（3）执行 npm init 命令创建 package.json ，这个文件保存着这个项目的相关信息；

（4）执行npm install gulp --save-dev 本地安装gulp；

（5）在工程目录下创建gulpfile.js文件；

（6）执行gulp，运行项目即可。

gulp中文文档： https://www.gulpjs.com.cn/docs/

有一篇博客将gulp的一些用法整理的很详细，可以参考阅读：https://www.cnblogs.com/2050/p/4198792.html

巴特西

gulp的作用，安装，使用

最新文章

热门文章