gulp是用来干什么的？（概念）

Posted 2020-09-18 红妆满面

 

当我们在使用gulp的时候，gulp到底用来干什么呢？

1. 编译 sass
2. 合并优化压缩 css
3. 校验压缩 js
4. 优化图片
5. 添加文件指纹（md5）
6. 组件化头部底部（include html）
7. 实时自动刷新…
8. ......
9. 压缩静态资源
10. 变更静态资源
11. 给静态资源添加 md5
12. 修改预处理样式后自动编译（SASS，Less）
13. 合并雪碧图
14. 自动刷新浏览器
15. ......
16. Sass编译
17. Css Js 图片压缩
18. Css Js 合并
19. Css Js 内联
20. Html的include功能
21. Autoprefixer
22. 自动刷新
23. 去缓存
24. Handlebars模板文件的预编译
25. 雪碧图
26. ESLint
27. rem移动端适配方案

 

总之，gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

 

然而由于众所周知的原因，国内到 npm 服务器的连接很不稳定，如果你有V了个PN大可不必担心，也可通过设置 npm 代理服务器的方式访问：

// 设置代理
npm config set proxy="http://127.0.0.1:1080"
// 删除代理
npm config delete proxy

 

推荐一个简单的方案：使用淘宝 npm 镜像 

“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。” —— 淘宝团队点赞

npm config set registry="https://registry.npm.taobao.org"
npm config set disturl https://npm.taobao.org/dist

如上设置完npm淘宝镜像的话，之后的命令使用还是使用的npm而不是现编的使用cnpm来代替npm

当然你也可以执行如下的命令：

npm install cnpm -g --registry=https://registry.npm.taobao.org

直接使用cnpm代替npm里操作！

 

初步准备工作准备完毕，接下来 gulp 教程了：参考上一篇随笔