当我们在使用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. BIT+DP

    2018CCPC网络赛 J - YJJ's Salesman HDU - 6447 YJJ is a salesman who has traveled through western country ...

  2. Map容器——TreeMap及常用API,Comparator和Comparable接口

    TreeMap及常用API ①   TreeMap类通过使用红黑树实现Map接口; ②   TreeMap提供按排序顺序存储键/值对的有效手段,同时允许快速检索; ③   不像散列(HashMap), ...

  3. math & 三元一次方程组的解法

    math & 三元一次方程组的解法 class 6 math 例题 问题: 1. 已经做好的与没有做好的比例是 5 比 7; 2 再做好51,完成总数的 70%; 3. 问,一共要做多少朵花? ...

  4. iOS学习笔记40-日志重定向

    一.日志重定向 我们在iOS开发过程中,我们时常会使用NSLog打印到控制台的日志信息进行代码调试,但这样调试的前提是连接上Xcode.如果进行真机调试但同时又不能连接Xcode的时候,就不能直接在x ...

  5. [POJ2417]Discrete Logging(指数级同余方程)

    Discrete Logging Given a prime P, 2 <= P < 2 31, an integer B, 2 <= B < P, and an intege ...

  6. JS判断SharePoint页面编辑状态

    这篇博客主要讲使用不同的客户端方式来判断页面的编辑模式. 1.当页面处于发布状态时,可以使用下面两种方式:if(g_disableCheckoutInEditMode == true) {   ale ...

  7. node总结--回调函数阻塞和非阻塞代码实例

    阻塞代码实例: var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data. ...

  8. C语言中的bool类型

    C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...

  9. 牛客网 牛客练习赛11 A.假的线段树

    看不懂题意,而且太菜,写了两道就溜了... A.假的线段树 链接:https://www.nowcoder.com/acm/contest/59/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2 ...

  10. 洛谷——P2196 挖地雷

    题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...