目录
一、什么是gulp？为什么要用gulp？
gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。因为项目中往往会包含很多图片、css\js\html 代码，而这些如果不压缩的话会给客户端加载时带来很大压力，所以需要gulp来压缩打包
二、gulp的安装
附上本地安装和全局安装的区别：https://www.cnblogs.com/qiangxia/p/5264720.html
1.全局安装
npm install gulp -g
2.本地安装
npm init命令可以使在命令行目录下生成一个package.json，里边包含了项目所用到的包，在别人使用项目的时候，就不用安装所有的包了，只需使用npm install 指令就可以安装package.json里边项目用到的包
使用方法：将目录切换到项目的目录中，输入npm init ，然后可以一直回车直接用默认值，也可以自己输入
最后在命令行目录下生成一个package.json文件
新建一个文件夹，文件夹名称即项目名称为gulpdemo，新建名称为css、js、html的文件
在gulpdemo目录下生成了一个package.json文件，在sublime中打开项目，打开package.json是这样的
--save-dev指令是将待安装的包添加到package.json里的依赖中，比如在安装gulp时，在项目目录中，执行此指令
npm install gulp --save-dev
三、创建第一个任务
再新建一个gulpfile.js，注意名称必须是gulpfile.js，要不然gulp执行不了。里边的内容如下，作用是在控制台输出helloword：
var gulp = require("gulp");
gulp.task("greet",function(done){
console.log("helloword");
done();
});
相当于指令greet即执行function函数输出helloword，在命令行中执行：
gulp greet
四、gulp的使用
1.压缩css、js
共需要安装以下几种包，安装方式都是gulp install xxx --save-dev
处理css用到的包：gulp-cssnano
处理css的流程，在gulpfile.js里，定义这两个功能
修改处理后文件名字用到的包：gulp-rename
处理js用到包：gulp-uglify
gulp.task("css",function(){
gulp.src("./css/*.css") //读取css目录下，所有css类型的文件
.pipe(cssnano()) //用管道将读取的文件传给cssnano()
.pipe(rename({"suffix":".min"})) //需要安装gulp-rename，最后的文件就会是index.min.css
.pipe(gulp.dest("./dist/css")) //将处理后即压缩后的的css放到指定位置
});
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(uglify())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
2.合并文件
用npm下载gulp-concat
合并多个js文件夹下的.js文件，然后再进行压缩uglify
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(concat("index.js")) //合并多个文件到Index.js
.pipe(uglify({
'toplevel':true, //将全局的变量名称压缩
'compress':{
'drop_console':true //取消控制台打印
}
}))
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
3.压缩图片
gulp.task("images",function(){
gulp.src("./images/*.*") //因为图片格式众多，所以就所有格式都压缩
.pipe(cache(imagemin())) //执行压缩
.pipe(gulp.dest("./dist/images"))
});
4.检测代码修改，自动刷新浏览器
gulp.task("watch",function(){
gulp.watch("./css/*.css",['css']) //监听所有css文件，当有代码修改的时候，就执行css任务，自动的将修改的文件存储到css任务最后存储的文件
这个方法需要先执行watch任务，才会监听，也可以用npm下载browser-sync，使其实时刷新
gulp.task("bs",function(){
bs.init({
'server': {
'baseDir':'./' //指定服务器开始的根目录
}
})
});
gulp.task("server",['bs','watch']);
//gulp.task("default",['bs','watch']);——只要在命令行中输入gulp就自动的执行这个任务
然后再在需要监听的任务后边加上 .pipe(bs.stream())
五、gulpfile.js的全部代码：
注意开头的注册是需要提前把包下载下来的。
var gulp = require("gulp");
var cssnano = require("gulp-cssnano"); //处理css文件
var rename = require("gulp-rename"); //将处理后的文件重命名
var uglify = require("gulp-uglify"); //处理js文件
var concat = require("gulp-concat"); //合并两个文件,未下载下来Not found:gulp-concant
var cache = require("gulp-cache");
var imagemin = require("gulp-imagemin");//压缩图片
var bs = require("browser-sync").create() //创建一个用来刷新浏览器的服务器
gulp.task("greet",function(done){
console.log("helloword");
done();
});
gulp.task("css",function(){
gulp.src("./css/*.css") //读取css目录下，所有css类型的文件
.pipe(cssnano()) //用管道将读取的文件传给cssnano()
.pipe(rename({"suffix":".min"})) //需要安装gulp-rename，最后的文件就会是index.min.css
.pipe(gulp.dest("./dist/css")) //des是存储到指定位置的api，即将处理后即压缩后的的css放到指定位置
.pipe(bs.stream()) //设置修改css代码可以实时刷新浏览器
});
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(concat("index.js")) //合并多个文件到Index.js
.pipe(uglify({
'toplevel':true, //将全局的变量名称压缩
'compress':{
'drop_console':true //取消控制台打印
}
}))
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
gulp.task("images",function(){
gulp.src("./images/*.*") //因为图片格式众多，所以就所有格式都压缩
.pipe(cache(imagemin())) //执行压缩
.pipe(gulp.dest("./dist/images"))
});
gulp.task("watch",function(){
gulp.watch("./css/*.css",['css']) //监听所有css文件，当有代码修改的时候，就执行css任务，
});
gulp.task("bs",function(){
bs.init({
'server': {
'baseDir':'./' //指定服务器开始的根目录
}
})
});
gulp.task("server",['bs','watch']);
//gulp.task("default",['bs','watch']);——只要在命令行中输入gulp就自动的执行这个任务
gulp的开发文档和api：https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/
参考教程：https://www.bilibili.com/video/BV1AE411477J?p=192