：
相信大家一定听说过gulp或者webpack，grunt等前端构建工具。gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 它能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了请不要喷我，毕竟我也是一个菜鸟。写下这篇笔记，不是为了证明什么，就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了
1、node环境搭建
想要使用gulp，首先你得在你得电脑里面安装node.js，因为gulp是基于Nodejs的自动任务运行器。这个我就不详细介绍怎么安装了吧，网上教程一搜一大把。相信正在使用gulp的朋友，也知道怎么安装node.js
2、使用命令行工具
开发的环境安装好了以后，接下来就是通过命令行来下载相应开发的模块包。什么是命令行？命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt）windows系统下 WIN+R打开命令行工具，在里面输入cmd,回车。如下图：
3、选装cnpm（淘宝镜像）
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常.
3.1、官方网址：http://npm.taobao.org；
3.2、安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重写打开，安装完直接使用有可能会出现错误；
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。
4、全局安装gulp
4.1、说明：全局安装gulp目的是为了通过她执行gulp任务；
4.2、安装：命令提示符执行
cnpm install gulp -g
4.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
4.4、依赖安装： npm install gulp --save-dev，这个可以在你的当前的项目目录下，打开命令行工具进行依赖安装。下面我们会在介绍packge.json文件当中介绍为什么需要依赖安装
5、新建package.json文件
5.1、package.json文件是基于node.js项目必不可少的配置文件，它是存放在项目根目录的普通json文件，里面有你各个依赖安装模块插件的版本信息，以至于你能清楚看到你安装了那些模块。如下图我安装很多模块以后的json文件。
5.2、配置packge.json文件
npm init //初始化packge.json文件
注意：初始化packge.json文件必须在你项目的根目录下打开命令行工具，执行初始化代码。（怎么在当前目录下打开命令行工具？shift+右键。当然，win10系统的命令行工具被微软改版了，叫Powershell，作用还是一样）
6、新建gulpfile.js文件
既然我们要使用gulp,我们就需要建立一个gulpfile.js文件，gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件。gulp的开发代码都写在这个里面的
js代码：
const gulp=require('gulp'); //引用gulp
const del=require('del'); //引用gulp删除插件
const uglify=require('gulp-uglify'); //引用压缩Js插件
const css=require('gulp-clean-css'); //gulp压缩css文件
const rename = require("gulp-rename"); //引用重命名插件
gulp.task('hello',function () { //定义一个hello任务
console.log('hello')
});
//task()：定义任务
//src():源文件
// pipe():管道流，接通源头文件与目标文件的输出
// dest():输出文件的目的地
// watch():监视文件
//事例：
// 1、复制单个文件
gulp.task('copyHtml',function () {
return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))
});
// 2、复制多个文件
gulp.task('copyAllHtml',function () {
return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));
});
// 3、复制指定文件
// [指定的文件已，指定的文件2]
gulp.task('copy2Js',function () {
return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])
.pipe(gulp.dest("dist/public/js"))
});
// 4、某个文件
// ！排队的文件
gulp.task("copyNoJs",function () {
return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])
.pipe(gulp.dest('dist/public/js'))
});
// 5、复制多个后缀名的图片
// {选项一，选项二}
gulp.task("copyImage",function () {
return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')
.pipe(gulp.dest('dist/public/img'))
});
// 6、执行多个任务
// gulp.task('任务名称',[任务依赖的模块],回调函数)
// 依赖任务之间没有顺序之分，异步执行
// 依赖任务之间完成后，在执行当前的回调函数
gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {
console.log('编译成功')
});
// 7、Watch:监视文件的变化
gulp.task('myWatch',function () {
gulp.watch('./src/public/login.html',['build'])
});
// 8、删除文件
gulp.task("del",function () {
// del('./dist/public/img/*.{jpg,png,jepg,gif}')
// *：所有文件
// **：所有文件夹
del(['./dist/public/js/*']);
del(['./dist/**/*']);
});
gulp.task('default',function () {
gulp.start('serve')
});
// 9、压缩js文件
gulp.task('ysjs',function(){
return gulp.src('./src/public/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./src/public/js'));
});
//10、 添加监听
gulp.task('watch_js',function(){
return gulp.watch('./src/public/js/*.js',['ysjs'])
});
//11、压缩css文件
gulp.task('css',function () {
return gulp.src('./src/public/sass/*.css')
.pipe(css())
.pipe(gulp.dest('./src/public/sass'))
});
//添加监听
gulp.task('jtCss',function () {
return gulp.watch('./src/public/sass/*.css',['css'])
});
//12、重命名css文件
gulp.task('reName',function () {
return gulp.src('./src/public/sass/*.css')
.pipe(rename({suffix: '.css'}))
.pipe(css())
.pipe(gulp.dest('./src/public/sass'))
}); 7、运行gulp
7.1、说明：命令提示符执行gulp 任务名称；
7.2、编译less：命令提示符执行gulp testLess；
7.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]
8、使用webstorm运行gulp任务
9、使用vscode运行gulp任务
vcode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。
在vscode上我们想要简单的运行gulp任务，我们可以下载一款名为“Gulp Tasks ”的插件。安装好插件以后，我们将项目文件添加到工作区当中，然后打开gulpfile.js文件。
在左下角我们可以启动任务
10、总结：
10.1、安装nodejs；
10.2、新建package.json文件；
10.3、全局和本地依赖安装gulp；
10.4、安装gulp插件；
10.5、新建gulpfile.js文件；
10.6、通过命令提示符或者开发工具运行gulp任务。