Gulp3和Gulp4的简单使用方法

什么是Gulp？
Gulp是一个自动化构建工具，简单来说就是用来打包项目的。本文主要介绍一下gulp3和gulp4的使用，以及两者之间的一些区别。
一、Gulp3
1、安装gulp3
如果是首次安装，请先全局安装gulp3

npm i gulp@3 -g

然后初始化项目模块，就是为了生成package.json配置文件

npm init -y

初始化后，安装当前项目的gulp模块

npm i gulp@3 --save-dev

2、使用gulp3

1. 首先在根目录下面建一个gulpfile.js文件（命名必须是这个）
2. 插件安装

1  自动加载插件  ： npm install --save-dev gulp-load-plugins
2、压缩文件： npm install --save-dev gulp-uglify
3、重命名： npm install --save-dev gulp-rename
4、css文件压缩： npm install --save-dev gulp-minify-css
5、html文件压缩： npm install --save-dev gulp-minify-html
6、文件合并： npm install --save-dev gulp-concat
7、sass解析： npm install --save-dev gulp-sass {npm install node-sass@版本--ingore-scripts}
8、npm i browser-sync --save-dev  (搭建静态服务器需要提前下载)

3 、gulp的方法

1、src： 读取文件的数据流 可以进行一个或多个文件的读取
	     gulp.src("js/*.js") js文件夹下所有的js文件；
	     gulp.src(["js/a.js","js/b.js"]) 读取两个文件；
	     gulp.src("js/a.js") 读取一个文件
2、dest：gulp.dest(path);也就是将文件保存到某个路径下，
         gulp.dest("./dist/"),dist文件夹会自动生成
3、task  用来创建任务
4、watch 监视文件的变化

4、实例
1、监视文件的变化，【vscode新建终端，在当前路径下输入:gulp开启gulp】
以下代码的意思是：
首先将src目录下的js文件下的所有js文件合并为c.js
然后进行压缩，重命名为c.min.js
最后将其写入到dist文件下面（dist文件夹自动生成，不用手动建）

最后一个默认任务执行监听任务，只要./src/js下面的文件有变动，就可以在c.min.js文件中体现出来

//加载gulp模块
var gulp=require("gulp");
//加载自动插件模块
var plugins=require("gulp-load-plugins")();
//设置a任务
gulp.task("a",function(){
    //读取文件数据流
    gulp.src("./src/js/*.js")
    //合并js文件为一个c.js
    .pipe(plugins.concat("c.js"))
    //对c.js文件进行压缩
    .pipe(plugins.uglify())
    //对c.js文件重命名为c.min.js
    .pipe(plugins.rename("c.min.js"))
    //给文件写入数据流，dist文件会自动生成，内容全部都会写入到dist文件下面
    .pipe(gulp.dest("./dist/"));
});
//设置默认任务
gulp.task("default",function(){
    //对src下的所有js文件进行监听，如果发生变化就执行a任务，实现对js文件内容的自动更新
    gulp.watch("./src/**/*.js",["a"],function(){
        console.log("执行完成了");
    })
})

如果我们需要调用，直接在html页面的head部分引入c.min.js即可

2、静态服务器搭建：可以用来监视 sass 和 js文件
这个神器，对于测试很有帮助，它可以实时显示代码执行的效果，弄个分屏就爽了。
在搭建前需要进行几个插件的下载：
sass解析： npm install --save-dev gulp-sass
浏览器插件：npm i browser-sync
css文件压缩：npm install --save-dev gulp-minify-css

//进行模块的加载
var gulp=require("gulp");
//自动插件加载
var plugins=require("gulp-load-plugins")();
//浏览器插件加载
var browser=require("browser-sync").create();

//js任务模块
gulp.task("setJs",function(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"))
    //让浏览器自动重载，也就是刷新
    .on("end",browser.reload);
});
//sass任务模块
gulp.task("setSass",function(){
    gulp.src("./src/**/*.scss")
        .pipe(plugins.concat("main.scss"))
        .pipe(plugins.sass())
        .pipe(plugins.minifyCss())
        .pipe(plugins.rename("main.min.css"))
        .pipe(gulp.dest("./dist/"))
        //让浏览器自动重载，也就是刷新
        .on("end",browser.reload);
})
//对js 和 sass 连个任务进行监听
gulp.task("default",["setJs","setSass"],function(){
    browser.init({
    	//确保根目录下面有index文件
        server:"./",
        //端口：随意设置
        port:4050
    });
    // 分别对所有的 js 和 sass文件进行监听
    gulp.watch("./src/**/*.js",["setJs"]);
    gulp.watch("./src/**/*.scss",["setSass"])
});

3、可能遇到的问题
1、在安装sass解析模块报错 ,可按照以下方法进行尝试解决
//写在原先的node-sass
npm uninstall node-sass
// 从淘宝镜像上进行按照
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

2、整个目录不要出现中文

---

二、gulp4
1、安装：
如果有gulp3先卸载，然后进行安装
npm uninstall gulp

npm init -y

npm i gulp@4 --save-dev

npm -v

2、区别于gulp3
gulp4不再有任务，而是用series方法，它是异步的，先完成前置任务，在执行后面的函数

3、一些语法可以自行去官网查找：
gulp操作手册