gulp教程，只要你不是傻子就能学会的gulp！！！搭建生产环境和开发环境！全程图解！绝对最详细！

最新推荐文章于 2022-09-15 20:31:49 发布

风左山心

最新推荐文章于 2022-09-15 20:31:49 发布

阅读量879

点赞数

文章标签： gulp使用搭建生产环境搭建开发环境学习gulp gulp教程

本文链接：https://blog.csdn.net/HF819239570/article/details/52429721

版权

本文是一篇针对gulp的详细教程，适合初学者。内容包括：检查node环境，创建gulpfile文件，下载项目所需插件，介绍gulp的四个主要API：task、src、dist和watch，并通过实例演示如何配置任务。最后，通过执行gulp命令，成功建立生产环境，同时提到了开发环境的简单设置。文章鼓励读者在遇到问题时积极分析并解决问题。

摘要由CSDN通过智能技术生成

gulp新手指南

文章中如果出现任何问题，请不吝提出

大家既然搜到gulp，想必是享用到gulp，我就不说gulp是什么东西，有些什么作用之类的废话了，直接教大家怎么使用
首先你得有个下个node，利用node的npm下载gulp，或者用bower，然后手上有个小项目，好了，开始开干吧。

有git的用git,没git的用cmd,现在我用cmd安装gulp

（1）打开命令行工具，查看是否安装node，输入node -v查看版本号信息，如果出来版本号，代表有node

这里写图片描述
之后输入npm install –save-dev gulp，这是下载到本地项目文件下

（2）新建gulpfile文件

我的目录树结构如下：
这里写图片描述

（3）开始下载项目所需要插件

（3.1）如果只需要下载一个

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

风左山心

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

gulpstrap:带有 Gulp 的完整 Bootstrap 解决方案和构建系统，可将开发时间缩短一半！

07-12

作为Git 子模块加上和！ v2.0.1 一个非常智能的前端完整工具，可以更快更好地开发，可通过 Bower（包含 Angular、jQuery）完全扩展，可通过 Gulp（支持 Less、Coffeescript、Sourcemaps）轻松部署并与集成。测试...

基于Gulp小程序开发工作流，区分开发环境和生产环境

weixin_33795093的博客

09-17

788

github.com/Bowennan/gu…clone 到本地安装依赖 npm install 或者 yarn (yarn 比较稳定不需要翻墙)初始化第一个页面 index 执行： npm run create index (注意：第一次安装会自动创建page文件夹，会有提示，再执行一次此命令会真正创建index页面相关的文件) 本工作流所创建的文件是按照小程序的规范创建的，只不过引入了scs...

参与评论您还未登录，请先登录后发表或查看评论

gulp生产环境搭建——总结

XMwarrior的博客

11-03

1121

每个人的开发环境搭建都会按照自己的编码习惯，自我调整。但现在日益壮大的插件群体总会让你眼花缭乱。今天无意中发现前辈的gulp使用小结，感觉受益匪浅，下面是我根据推荐的插件搭建的本人适用的开发环境gulpfile.js的配置，常用的基本都有，懂的不用解释，精华自取！var gulp = require("gulp"), babel = require("gulp-babel"),//转义es6

Web前端自动化构建（三）——用Gulp配置本地开发环境

奋斗的小绿萝

07-18

1519

全名：《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》作者：Stefan Banumgartner【奥】译者：谈博文 Gulp提供了自动化的能力，可配置成一个完全自动化的、完整的开发环境。通过Gulp API，gulp.series、gulp.parallel，决定task执行的顺序通过Gulp API，gulp.watch 创建监控过程，...

前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境

前端工程师

07-19

974

一个项目的完成一般需要经过三个步骤：初始化、开发和部署。在前端开发过程中，我们经常需要依靠一些自动化构建工具来优化前端工作流程，来帮助我们完成一系列繁琐的工作，例如浏览器热更新、ES6编译、代码压缩、添加样式前缀、图片压缩等。在这些自动化构建工具中，比较有名的就是Grunt和Gulp。相比Grunt，Gulp的人气更高。作为一个独特的构建工具，Gulp的构建方法和Grunt完全不同。Gulp有以下特点：①它的底层计算完全是在内存中运行的，而且读取数据非常快。②它可以并行执行任务。③gulpfile是

开发环境（devDependencies）和生产环境（dependencies）的区别

weixin_38779534的博客

07-29

1180

/package.json 像webpack，gulp等打包工具，这些都是我们开发阶段使用的，代码提交线上时，不需要这些工具，所以我们将它放入devDependencies即可，但是像jquery这类插件库，是我们生产环境所使用的，所以如要放入dependencies，如果未将jquery安装到dependencies，那么项目就可能报错，无法运行，所以类似这种项目必须依赖的插件库，我们则必须打入dependencies中。在安装的时候 npm xxx --save / npm xxx -S 就是会添加到

gulp_Gulp!_MSGULP软件手册_

09-29

GULP使用手册，研究动力学仿真的美好工具

gulp_healthx3s_delphi7_Gulp!_

10-01

" 暗示了这是一个与使用Gulp自动化构建工具相关的项目，可能涉及到一个名为 "healthx3s" 的系统或者产品，而 "delphi7" 表明开发环境是Delphi 7，一个古老的面向对象的 Pascal 编程环境。Gulp则是JavaScript的构建...

gulp-mjml：将Gulp添加到您的MJML工作流程中！

02-03

Gulp MJML 将MJML添加到您的gulp工作流程中！用法：使用名为test.mjml的MJML文件，将您的电子邮件呈现到html文件夹： const gulp = require ( 'gulp' ) const mjml = require ( 'gulp-mjml' ) gulp . task ( '...

gulp的自动化开发环境配置

weixin_33725722的博客

05-27

104

2019独角兽企业重金招聘Python工程师标准>>> ...

入门文档03 区分开发与生产环境（生产环境才执行‘热更新’）

幸福有多远

07-14

入门文档03 区分开发与生产环境

一个gulp用于开发与生产的示例

weixin_33815613的博客

05-22

112

gulp是一款流行的前端构建工具，可以帮我们完成许多工作：监听文件修改、刷新浏览器、编译Less/Scss、压缩代码、添加md5、合并文件等。gulp的配置和使用特别简单，学习gulp过程中顺便写了一个小示例。可以在GitHub上下载该示例：https://github.com/gymmer/gulp-example 准备工作 gulp是基于Node.js的。因此需先安装Node。接下来使...

Gulp环境搭建

Hguzilideaoqi的博客

06-02

164

https://www.gulpjs.com.cn/ 一、 Gulp简介 gulp是前端开发过程中自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；gulp是基于Nodejs的。 Gulp能完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

使用gulp进行简单的分环境配置

loshirleyve的博客

09-19

2963

https://segmentfault.com/a/1190000004138375?_ea=503865出发点通常我们在测试开发，正式运行等不同环境中，代码所使用的某些配置，如请求的api地址，文件存放位置等是不同的，实现这些配置信息的统一管理和快速配置可以减少我们手动更改的麻烦。解决方案将不同环境下的配置信息以json形式统一存储在config.json文件中添加constants

基于gulp的一个简单的处理多个api域名环境的开发工作流

weixin_33963189的博客

07-27

279

gulp-simple-workflow-multi-host github 简单的工作流基于Gulp 利用 gulp-preprocess 进行多环境（api域名）开发、打包 sass转css css&js&html压缩前言最近苦于搬砖，我们有三个开发环境，不同的环境的api的域名不一样，像我这么懒的人只能一键...

Gulp项目开发环境的搭建和流程

weixin_45348067的博客

03-09

291

架构设计前后端分离（前端：html css js 后端：提供接口、数据库操作、。。）,前后端不分离：（.jsp .php .aspx） rmvc 模式 router :路由 model: 数据层 view 视图层 controller 控制层（业务逻辑的处理，router+model衔接到一块）技术栈：es6 + zepto.js + scss … 构建环境：gulp + webpack 移动...

gulp-preprocess自定义上下文或环境配置预处理 HTML、JavaScript 和其他文件

L_wade的博客

07-07

831

gulpfile.js var preprocess = require("gulp-preprocess"), gulp = require('gulp'); gulp.task("html", function () { return gulp .src("app/*.html") .pipe(preprocess({ context: { NODE_ENV: "production",add:"123", DEBUG: false } })) .pipe(gulp.d.

快速掌握Gulp自动化构建工具

老司机的后备箱

09-15

851

Gulp是一个自动化构建工具，类似Webpack，目的是把开发环境的代码转换为生产环境的代码，比如ES6转ES5、Saas转CSS、文件压缩等。Gulp的整体设计思路是通过文件读写和一系列Stream插件实现文件内容处理，完成构建工作。完整的构建工作可以拆分为多个构建步骤，每一个构建步骤称之为任务，一个大型的项目构建由多个任务组合完成。