当我们在使用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 教程了:参考上一篇随笔

gulp是用来干什么的?(概念)的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. Gulp的简单使用

    我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...

  3. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

  4. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  5. webpack + vue

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.ES6语法 前言 在对着产品高举中指怒发心中之愤后,真正能够解 ...

  6. webpack + vuejs(都是1.0的版本) 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在 ...

  7. gulpjs

    http://www.cnblogs.com/2050/p/4198792.html   这篇文章很全面的讲解了gulpjs的使用 https://www.jianshu.com/p/9723ca2a ...

  8. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  9. Webpack vs Gulp

    Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...

随机推荐

  1. install chrome on ubuntu14.04

    summary chrome broswer can't found in ubuntu14.04 default source list.To install chrome ,you must ad ...

  2. Graham扫描法 --求凸包

    前言: 首先,什么是凸包? 假设平面上有p0~p12共13个点,过某些点作一个多边形,使这个多边形能把所有点都“包”起来.当这个多边形是凸多边形的时候,我们就叫它“凸包”.如下图:  然后,什么是凸包 ...

  3. PTA 10-排序6 Sort with Swap(0, i) (25分)

    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/678 5-16 Sort with Swap(0, i)   (25分) Given a ...

  4. 【Go】Panic函数

    panic(运行时恐慌)是一种只会在程序运行时才回抛出来的异常.在panic被抛出之后,如果没有在程序里添加任何保护措施的话,程序就会在打印出panic的详情,终止运行. 如果一个panic是无意间引 ...

  5. poj 1418 Viva Confetti

    Viva Confetti Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1025   Accepted: 422 Desc ...

  6. POJ3928 Ping pong

      Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Description N(3<= ...

  7. 【CF707B】Bakery(想法题)

    题意: 有N个城市,M条无向边,其中有K个城市是仓库 现在要在非仓库的城市中选择一家开面包店,使得其最少与一个仓库联通,且到所有仓库距离的最小值最小 (1 ≤ n, m ≤ 10^5, 0 ≤ k ≤ ...

  8. 【MFC】MFC中使对话框变成圆角矩形的代码(转)

    原文转自 http://blog.csdn.net/cracent/article/details/48274469 BOOL CLoginDlg::OnInitDialog() { CDialog: ...

  9. Group by 两表联查取另一表与之关联数据的总数

    使用group by 需要查询的字段 必须要放在group by 后面 SELECT U.UserLotterySn,count(W.Userlotterysn) as WinCount,U.Acti ...

  10. Tyvj——P1864 [Poetize I]守卫者的挑战

    来源:http://www.tyvj.cn/p/1864 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过.“我,Niz ...