1、安装node.js

node 安装地址：https://nodejs.org/

安装完成之后打开cmd，输入npm -v 出现版本号即安装成功

为什么安装node之后就会有npm呢？

node.js是JavaScript 的一种运行环境，是对Google V8引擎运行的封存，是一个服务器端的JavaScript的解析器。

nodejs中包含了npm，npm是nodejs的包管理器（package manage），我们在node.js上开发时，会用到很多人写已经写好的JavaScript代码，

如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦，于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用到某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来，试想如果这些工作全靠我们自己去完成会是多么麻烦。

2、全局安装gulp

npm install gulp -g

3、创建本地项目

创建本地项目之前，需要先初始化一个仓库 

npm init 

初始化命令

注意：这里的entry point：需要定义为gulpfile.js，因为控制台输入gulp的时候会首先去寻找gulpfile.js文件，如果这里定义为index.js，后面也必须新建一个gulpfile.js文件

初始化之后目录结构

初始化时，你可以设置默认值，不想设置的，直接一路回车即可，之后会在根目录下自动创建一个package.json文件，这个文件是用来存放即将安装的插件的name和version。

4、设计项目目录结构

src目录结构

5、安装各种插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch gulp-watch-path stream-combiner2  gulp-clean gulp-file-include gulp-font-spider gulp-htmlmin gulp-relpace gulp-rev gulp-rev-collector gulp-run-sequence gulp-webserver  --save-dev

gulp --本地gulp

gulp-imagemin -- 图片压缩

gulp-minify-css -- css压缩

gulp-uglify --压缩

gulp-util --控制台代码着色

gul-watch --监听新增的HTML，不用每次新增文件都要执行命令来重新启动服务

gulp-watch-path --文件很多时编辑那个，压缩那个，不会全部压缩，（获取改变的文件的src和dest路径）

stream-combiner2 --有些gulp任务编译出错会终止gulp.watch，使用gulp-watch-combiner2可避免这种情况

gulp-clean --清除文件，文件夹

gulp-include --使用include引入其他文件比如引入公共的头部和公共的底部

gulp-font-spider --字体压缩

gulp-htmlmin --html压缩

gulp-replace --替换目标文件中的文本

gulp-rev，gulp-rev-collector --为静态文件添加一串hash值，解决cdn缓存问题

 gulp-run-sequence --按顺序执行task

gulp-webserver --用来开启服务

--save-dev 这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内，这个是开发环境所需要的依赖

6、编写gulpfile.js文件，引入模块

const Gulp = require('gulp'); 

const Minifycss = require('gulp-minify-css'); 

const Uglify = require('gulp-uglify'); 

const FileInclude = require('gulp-file-include'); 

const Watch = require('gulp-watch'); 

const WebServer = require('gulp-webserver');

const RunSequence = require('gulp-run-sequence'); 

const Clean = require('gulp-clean');

const rev = require('gulp-rev'); 

const revCollector = require('gulp-rev-collector'); 

const htmlmin = require('gulp-htmlmin'); 

const Dist = 'dist/home';

const replace = require('gulp-replace'); 

const imgMin = require('gulp-imagemin'); 

const autoprefixer = require('gulp-autoprefixer'); 

var fontSpider = require('gulp-font-spider'); 

7、gulp的使用

gulp一共有5个方法

gulp.task() --新建任务

gulp.src()  -- 获取文件源地址

gulp.dest() --文件输出地址

gulp.run()  --运行任务

8、创建gulp任务

9、package.json 文件

执行命令npm run dev 或者 gulp dev