gulp是用来干什么的?(概念)
当我们在使用gulp的时候,gulp到底用来干什么呢?
- 编译 sass
- 合并优化压缩 css
- 校验压缩 js
- 优化图片
- 添加文件指纹(md5)
- 组件化头部底部(include html)
- 实时自动刷新…
- ......
- 压缩静态资源
- 变更静态资源
- 给静态资源添加 md5
- 修改预处理样式后自动编译(SASS,Less)
- 合并雪碧图
- 自动刷新浏览器
- ......
- Sass编译
- Css Js 图片压缩
- Css Js 合并
- Css Js 内联
- Html的include功能
- Autoprefixer
- 自动刷新
- 去缓存
- Handlebars模板文件的预编译
- 雪碧图
- ESLint
- 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是用来干什么的?(概念)的更多相关文章
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- Gulp的简单使用
我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack + vue
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.ES6语法 前言 在对着产品高举中指怒发心中之愤后,真正能够解 ...
- webpack + vuejs(都是1.0的版本) 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在 ...
- gulpjs
http://www.cnblogs.com/2050/p/4198792.html 这篇文章很全面的讲解了gulpjs的使用 https://www.jianshu.com/p/9723ca2a ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- Webpack vs Gulp
Webpack vs Gulp 谁会被拍死在沙滩上 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...
随机推荐
- BIT+DP
2018CCPC网络赛 J - YJJ's Salesman HDU - 6447 YJJ is a salesman who has traveled through western country ...
- Map容器——TreeMap及常用API,Comparator和Comparable接口
TreeMap及常用API ① TreeMap类通过使用红黑树实现Map接口; ② TreeMap提供按排序顺序存储键/值对的有效手段,同时允许快速检索; ③ 不像散列(HashMap), ...
- math & 三元一次方程组的解法
math & 三元一次方程组的解法 class 6 math 例题 问题: 1. 已经做好的与没有做好的比例是 5 比 7; 2 再做好51,完成总数的 70%; 3. 问,一共要做多少朵花? ...
- iOS学习笔记40-日志重定向
一.日志重定向 我们在iOS开发过程中,我们时常会使用NSLog打印到控制台的日志信息进行代码调试,但这样调试的前提是连接上Xcode.如果进行真机调试但同时又不能连接Xcode的时候,就不能直接在x ...
- [POJ2417]Discrete Logging(指数级同余方程)
Discrete Logging Given a prime P, 2 <= P < 2 31, an integer B, 2 <= B < P, and an intege ...
- JS判断SharePoint页面编辑状态
这篇博客主要讲使用不同的客户端方式来判断页面的编辑模式. 1.当页面处于发布状态时,可以使用下面两种方式:if(g_disableCheckoutInEditMode == true) { ale ...
- node总结--回调函数阻塞和非阻塞代码实例
阻塞代码实例: var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data. ...
- C语言中的bool类型
C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...
- 牛客网 牛客练习赛11 A.假的线段树
看不懂题意,而且太菜,写了两道就溜了... A.假的线段树 链接:https://www.nowcoder.com/acm/contest/59/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2 ...
- 洛谷——P2196 挖地雷
题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...