gulp是用来干什么的?(概念)

当我们在使用gulp的时候,gulp到底用来干什么呢?

  1. 编译 sass
  2. 合并优化压缩 css
  3. 校验压缩 js
  4. 优化图片
  5. 添加文件指纹(md5)
  6. 组件化头部底部(include html)
  7. 实时自动刷新…

总之,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 教程了:参考上一篇随笔

时间: 2025-01-04 21:57:45

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

Gulp 插件

Gulp 插件 前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gul

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

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

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

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)

人类的发展得益于对追求不断的提升,在能活着的基础上是否要活得潇洒一点,技术的发展亦如是.在公司作为一个最最最最最最最底层的搬砖码农,经历了两个版本的铸(zhe)炼(mo)之后,我痛下决心今后一定要:…………..一定要和产品惺(shi)惺(bu)相(liang)惜(li). 开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5

webpack + vuejs 基本配置(一)

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5.ES6语法 另外,这套教程的代码都在我的github上,读者可以对照着代码来看,不过还是希望大家自己亲手搭建,体验这个过程,git地址: git地址 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会

爬虫02 /数据解析

目录 爬虫02 /数据解析 1. 数据解析概述 2. 正则实现的数据解析 3. bs4实现数据解析 4. xpath解析 总结: 爬虫02 /数据解析 1. 数据解析概述 什么是数据解析,数据解析可以干什么? 概念:就是将一组数据中的局部数据进行提取. 作用:使用来实现聚焦爬虫 数据解析的通用原理 问题:html展示的数据可以存储在哪里? 标签之中 属性中 1.标签定位 2.取文本或者取属性 数据解析的常用方法 re bs4 xpath pyquery 2. 正则实现的数据解析 需求:http:

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

.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !important;} 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(

gulp源码解析(二)—— vinyl-fs

在上一篇文章我们对 Stream 的特性及其接口进行了介绍,gulp 之所以在性能上好于 grunt,主要是因为有了 Stream 助力来做数据的传输和处理. 那么我们不难猜想出,在 gulp 的任务中,gulp.src 接口将匹配到的文件转化为可读(或 Duplex/Transform)流,通过 .pipe 流经各插件进行处理,最终推送给 gulp.dest 所生成的可写(或 Duplex/Transform)流并生成文件. 本文将追踪 gulp(v4.0)的源码,对上述猜想进行验证. 为了分

gulp,grunt,webpack 菜鸟整理

首先准确说把webpack放在这儿不太好,因为webpack准确说更有点类似require,sea这类的模块化工具:而前两者更偏向于压缩混淆之类: 三者下载npm包之后,都需要各自的config文件: grunt的congfig文件书写格式是键值,类似一种配置的编写,gulp是回掉函数,类似编程的编写:wepack的配置书写类似一种common规范: 直接代码示例: grunt module.exports = function (grunt) {    require("load-grunt-