当我们在使用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. javascript学习笔记 - 执行环境及作用域

    一 执行环境(环境) 1.每个执行环境都有一个关联的全局变量对象.例如:web浏览器中,window对象为全局变量对象.环境中定义的所有变量和函数都保存在该对象中.全局执行环境是最外围的环境. 2.执 ...

  2. hdu1599 find the mincost route floyd求出最小权值的环

    find the mincost route Time Limit: 1000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  3. mybatis的嵌套查询(嵌套查询nested select和嵌套结果nested results查询)区别

    (转自:http://blog.csdn.net/canot/article/details/51485955) Mybatis表现关联关系比hibernate简单,没有分那么细致one-to-man ...

  4. NOJ——1672剪绳子(博弈)

    [1672] 剪绳子 时间限制: 500 ms 内存限制: 65535 K 问题描述 已知长度为n的线圈,两人依次截取1~m的长度,n, m为整数,不能取者为输. 输入 输入n, m:( 0 < ...

  5. Xode 8 的那些坑

    刚发布完Xcode的8.0果断更新了,发现用起来非常容易闪退,关键是我编辑项目时默认使用Xcode8打开,导致我用Xcode7打开Xib是报错: This version does not suppo ...

  6. WebRTC VideoEngine综合应用示例(一)——视频通话的基本流程(转)

    本系列目前共三篇文章,后续还会更新 WebRTC VideoEngine综合应用示例(一)——视频通话的基本流程 WebRTC VideoEngine综合应用示例(二)——集成OPENH264编解码器 ...

  7. Scrapy学习-16-动态网页技术

    Selenium浏览器自动化测试框架 简介 Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 支持的浏览器包括IE(7, 8, ...

  8. SQL注入原理及防范

    1.1.2 正文 SQL Injection:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 具体来说,它是利用现有应用程序,将(恶 ...

  9. ajax操作提交整个表单内容

    1 2 3 4 5 6 7 8 9 10 11 12 13 $.ajax({                 cache: true,                 type: "POST ...

  10. LeetCode OJ--Permutations II

    给的一个数列中,可能存在重复的数,比如 1 1  2 ,求其全排列. 记录上一个得出来的排列,看这个排列和上一个是否相同. #include <iostream> #include < ...