新建一个项目文件夹
在文件夹中右击 git bash here出现命令行
查看node npm 的版本
通过 node -v npm -v 来获取
全局安装gulp
npm install gulp -g 或者使用 npm install –global gulp
如果安装过程中出现以下内容：
Unexpected end of JSON input while parsing near ‘…86’,’tarball’:’https:’
可以在命令提示行中输入：npm cache clean -force 进行解决
cnpm淘宝镜像安装
如果用npm 安装比较慢，可以通过淘宝镜像进行处理 cnpm
淘宝镜像的安装方式：npm install -g cnpm –registry=https://registry.npm.taobao.org
在项目目录下创建package.json文件
Npm init 上述命令将指引设置项目名/版本/描述信息等，
安装gulp,作为开发时依赖项
Npm install –save-dev gulp
Package.json 插件版本号
Package-lock.json 插件安装目录
Node_modules 插件安装包
创建开发和导出文件夹
开发文件夹是src,导出文件夹是dist。
创建html任务
gulp.task(‘html’,function(){
Gulp.src(folder.src+’html/*’)
.pipe(folder.dist+’html/’)
})
创建了html任务，但是页面加载的时候默认执行的是default任务，然后将html任务放置到任务队列的后面。
Gulp.task(‘default’,gulp.series(‘html’));
注意: gulp4版本之后，default右边的两个参数需要放在gulp.series()的参数中。
此时还是有报错，提示‘html’ errored after 6.34ms TypeError:dest.on is not a function at DestroyableTransform.Readable.pipe
Gulp.pipe(‘路径’)，这样是不能处理任务的，需要通过gulp.dest(‘路径’)的方式处理
Gulp4版本之后，如果要在页面加载时处理多个任务，则需要通过gulp.parallel(‘’,’’,’’)的方式进行处理。
压缩文件
Gulp-htmlclean 下载压缩插件 npm install gulp-htmlclean --save-dev
或者使用淘宝镜像进行处理 cnpm install gulp-htmlclean –save-dev
插件下载完成后，调用插件的方法如下：
Var htmlclean = require(‘gulp-htmlclean’);
在文件导出之前需要进行压缩，通过pipe的方式进行压缩
压缩图片
有单独的压缩插件 gulp-imagemin
下载插件 npm install gulp-imagemin –save-dev
使用淘宝镜像 cnpm install gulp-imagemin –sace-dev
使用插件的用法如下：
Var imagemin = require(‘gulp-imagemin’);
Imagemin();图片压缩执行函数
压缩js的插件
Gulp-uglify 压缩js文件
下载插件 npm install gulp-uglify –save-dev
使用淘宝镜像 cnpm install gulp-uglify –save-dev
使用插件的用法如下：
Var uglify = require(‘gulp-uglify’);
去掉js中的调试语句
Gulp-strip-debug
下载插件 npm install gulp-strip-debug –save-dev
使用淘宝镜像 cnpm install gulp-strip-debug –save-dev
使用插件的用法如下：
Var debug = require(‘gulp-strip-debug’);
去掉js中的调试语句，然后再进行压缩。
将less转化成css
Gulp-less
下载插件 npm install gulp-less –save-dev
使用淘宝镜像 cnpm install gulp-less –save-dev
使用插件的用法如下：
Var less = require(‘gulp-less’);
压缩css
Gulp-clean-css
下载插件 npm install gulp-clean-css –save-dev
使用淘宝镜像 cnpm install gulp-clean-css –save-dev
使用插件的用法如下：
Var cleancss = require(‘gulp-clean-css’);
给css3属性添加前缀
Gulp-postcss autoprefixer
下载插件 npm install gulp-postcss autoprefixer –save-dev
使用淘宝镜像 cnpm install gulp-postcss autoprefixer –save-dev
使用插件的用法如下：
Var postcss = require(‘gulp-postcss’);
Var autopre = require(‘autoprefixer’);
使用的时候，autopre执行的结果要以数组的形式作为postcss的参数进行传递
开启服务器
Gulp-connect
设置开发或者生产环境
Export NODE_ENV=development
