gulp是前端工程化的工具，它可以对html,css,js等代码和图片进行压缩，也可以对sass和less等预处理语言进行编译，代码部署。gulp学起来简单，用起来方便，大大提高我们工作效率。
这里可以参考CTOLib码库的gulp基本教程 ||《gulp中文网》
安装node.js
因为gulp是基于node.js的，所以先要安装一下node.js。在网页中打开node官网安装就可以:https://nodejs.org/en/
使用命令行
小编习惯用git的命令工具，当然我们可以使用Windows的命令提示符。如下：
我们直接在开始菜单搜索cmd
然后回车就会打开命令提示符窗口，
我们输入命令node -v,点击回车，便可以查看node的版本，如果没有出现版本号，则说明安装失败。
查看node和npm版本
npm（node package manager）nodejs的包管理器，用于nodejs插件的安装、卸载、管理依赖等；我们需要用npm去安装gulp和gulp的依赖包。
淘宝镜像
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事
官方网址：http://npm.taobao.org；
在命令提示符中输入一下命令按回车安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完后我们可以用cnpm -v检查是否安装成功。注意，安装成功后关闭命令行窗口在打开，如果安装后直接使用可能会出现错误。
安装gulp
使用gulp需要在全局和项目中都安装。
在全局中安装命令:
$npm install --global gulp
然后我们进入我们的项目根目，，小编在E盘创建一个名为demo的项目为例。
这里我们先讲几个dos的命令：
e: 进入E盘
cd +文件名 进入指定目录
dir 查看当前目录中的文件
我们在命令提示符中执行cd demo命令就可以进入到项目根目录安装gulp了。
作为项目的开发依赖（devDependencies）安装（项目根目录）：
$cnpm install --save-dev gulp
安装成功后，项目会自动生成如下目录：
第一个目录里面是项目的依赖包，第二个文件是管理你本地安装的npm包。打开package.json文件可以看到我们安装了gulp并展示了它的版本号。
package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。在之前是用cnpm init去配置它。
$cnpm init
gulp配置文件
gulpfile.js 是gulp不可缺少的配置文件，在项目根目录下创建一个名为 gulpfile.js 的文件,配置如下：
执行gulp命令：
$gulp
默认的任务会被运行，当然这个任务目前没有做任何事。
好啦，gulp的安装和配置就讲完了，之后要安装配置gulp的常用插件。
常用Gulp插件汇总-----
HTML和CSS
autoprefixer - 解析CSS并通过我可以使用添加供应商前缀到规则。
gulp-browser-sync - 在建立网站时保持多个浏览器和设备同步。
gulp-useref - 解析HTML文件中的构建块，以替换对未优化的脚本或样式表的引用。
gulp-email-design - 设计和测试HTML电子邮件模板的工作流程。
gulp-uncss - 从您的项目中删除未使用的CSS。
gulp-csso - 非常酷的CSS minificator。另外，还有很多CSS优化器和基准测试（GitHub）。但是最近我看到了没有Gulp的最强大的速记(shortthand)工具，它确实如此：
a{
font-family：Arial;
font-style：italic;
font-size：14px;
line-height：18px;
font-weight：bold;
background-image：url（'example.png'）;
background-color: red;
background-size：cover;
background-repeat: no-repeat;
}
=>
a{
font：italic bold 14px / 18px Arial;
background: red url('example.png') no-repeat / cover;
}
gulp-htmlmin - 整齐的HTML minificator。
gulp-csscomb - 改进你的CSS的结构。
gulp-csslint - CSS linter。
gulp-htmlhint - HTML验证器。
gulp-processhtml - 在编译时处理html文件以随意修改它们。
JavaScript的
gulp-autopolyfiller - 精确的polyfills。这就像Autoprefixer，但对JavaScript填充。
gulp -babel - 编写下一代JavaScript的编译器。
gulp-jsfmt - 用于格式化，搜索和重写JavaScript。
gulp-jscs - 用于检查JavaScript代码样式。
gulp-modernizr - 建立一个精益，意味着的Modernizr 检测器。
gulp-express - 使用Express.js Web服务器启动（并监督），与socket.io配合使用
gulp-requirejs和gulp- browserify- 分别优化RequireJS和Browserify的工作。
gulp-plato - 生成静态分析报告。
gulp-complexity - 使用Halstead和Cyclomatic指标评估代码可维护性。
fixmyjs -通过JSHint (gulp-jshint)自动修复傻瓜式的lint错误。
gulp-jscpd - 用于编程源代码的复制/粘贴检测器。
gulp-buddy.js - 用于javascript的幻数检测。
gulp-jsonlint - JSON验证器。
gulp-uglify - JavaScript压缩器。
gulp-concat - 连接文件。
单元测试
图像
gulpicon - 神秘的CSS图标解决方案。
gulp-iconfont - SVG到webfont转换器。
gulp-responsive - 为响应式网站制作不同大小的图片。
gulp-sharp - 用于生产JPEG，PNG，WebP和TIFF图像的最快模块。
gulp-svgstore - 从文件夹合并SVG。
gulp-imacss - 将图像文件转换为数据URI的应用程序和库。
gulp-imagemin иgulp-tinypng或fimage压缩。
gulp-spritesmith - 将一组图像转换为spritesheet和相应的CSS变量。
其他
gulp-grunt - 能够从Gulp运行Grunt任务。
gulp-watch - 每当观看文件改变时运行任务。
gulp-notify - 当Gulp任务失败时，系统通知中心的自动错误消息。
gulp-git - 能够使用Git命令。
gulp-jsdoc - 通过运行JSDoc3生成JavaScript文档。
gulp-rev - 通过内容散列修改静态文件资产。
gulp-bump - 在包JSON和gulp-update中增加版本，它会自动更新包。
gulp-bower-files - 注入Bower软件包。
gulp-removelogs - 删除控制台日志记录语句。
gulp-preprocess - 根据环境配置预处理文件。
gulp-duration - 显示Gulp任务的执行时间。
gulp-changed和gulp-newer - 只运行自上次成功运行后修改的源文件的Gulp任务。
gulp-connect - 简单的静态web服务器。
gulp-shell - 运行Shell命令。
gulp-ssh - 提供了通过SSH和SFTP进行连接的功能。
gulp-zip - 压缩文件和文件夹..
gulp-clean和gulp-copy - 分别删除和复制来源。
gulp-replace - 在文本文件中搜索和替换字符串。
gulp-filesize - 以可读格式显示文件的大小。
gulp-util - 用于开发Gulp插件的实用程序。
编译器
- gulp-less - LESS在CSS中。
- gulp-sass - СSS中的SASS / SCSS。
- gulp-compass - CSS中带有SASS的样式指南。
- gulp-stylus - 在CSS中stylus(CSS的预处理框架)。
- gulp-coffee - JavaScript中的CoffeeScript。
- gulp-typescript - JavaScript中的TypeScript。
- gulp-jade - HTML中的Jade。
- gulp-handlebars - JST中的Handlebars模块（javascript/jquery模板引擎）。
- gulp-jst - JST中的Underscore模块（一个 JavaScript工具库）。
- gulp-react - Facebook中的React JSST模块。
- gulp-nunjucks - JST中的Nunjucks模块。
- gulp-dustjs - JST中的dustjs模块。
- gulp-angular-templatecache - JST中的AngularJS模块。
最后
- psi - PageSpeed洞察报告。
- tmi - TMI（太多图片） - 在网络上发现您的图片重量。
- ngrok - 本地主机的内省隧道（反向代理：一个从公共端点到本机的隧道）。
- pageres - 响应式网站截图。
- matchdep - 过滤npm模块依赖关系。
- 也许你想在编辑器中直接使用一些自动化方法，所以看看The Best Plugins for Sublime Text。
https://github.com/Pestov/essential-gulp-plugins
扩展阅读
混淆JavaScript代码的gulp插件：
gulp-obfuscate使用Gulp.js来自动化你的任务
以开发者的视角整理编排的前端开发所使用的语言的主流学习资源
Gulp上手指南
Gulp，比Grunt更好用的前端构建工具
为您推荐
HTML解析引擎：Jumony搭建
一个免费的，无限流量的Blog ---- github页面和Jekyll入门
Vue.js基本语法的介绍
移动前端 - 图片压缩上传实践
.NET的WebSocket开发包比较