当我们在使用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. Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined)

    我真的是太菜了 A. Perfect Squares time limit per test 1 second memory limit per test 256 megabytes input st ...

  2. Java IO Notes (一)

    原文链接:http://tutorials.jenkov.com/java-io/index.html Java NIO  It contains classes that does much of ...

  3. iOS学习笔记31-从图册获取图片和视频

    一.从图册中获取本地图片和视频 从图册中获取文件,我们使用的是UIImagePickerController,这个类我们在之前的摄像头中使用过,这里是链接:iOS学习笔记27-摄像头,这里我们使用的是 ...

  4. HDU——1418抱歉(平面欧拉公式)

    抱歉 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  5. 刷题总结——run(ssoj)

    题目: 题目描述 企鹅国正在举办全面运动会,第一项比赛就是跑步.N 个人在圆形跑道上跑步,他们都有各自的速度和起点.但这个跑步规则很奇怪,当两个人相遇的时候编号较小的就会出局,当场上剩下最后一个人的时 ...

  6. angular中关于文件引入

    var angular = require('angular'); module.exports = angular.module('app.mymodule2', []).controller('H ...

  7. JVM指令详解(下)

    九.自增减指令 该指令用于对本地(局部)变量进行自增减操作.该指令第一参数为本地变量的编号,第二个参数为自增减的数量. 比如对于代码:                 int d=10; d++; d ...

  8. 转 PHP中exec、system等函数调用linux命令问题

    PHP中exec.system等函数调用linux命令问题 先小说两句:今天研究了下PHP调用LINUX命令的功能,一开始怎么做都调用不成功,试了好久才终于成功了,所以发出来分享一下.下面我将详细介绍 ...

  9. 标准C程序设计七---112

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  10. Python入门--18--异常与try,except语句

    Python标准异常总结 AssertionError 断言语句(assert)失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF(Ctrl+d) ...