gulp3与gulp4

gulp安装与插件的安装

npm i gulp@3 -g         全局安装gulp@3
npm i gulp -g           全局安装gulp
npm i gulp@3 --save-dev 安装本地的gulp@3
npm i gulp --save-dev   安装本地的gulp
npm init -y             初始化gulp的package.json

npm i gulp-load-plugins --save-dev  加载全部插件，且在引入全部插件后头部要多写一句var plugins=require("gulp-load-plugins")();
npm i gulp-concat --save-dev        连接整合插件
npm i gulp-rename --save-dev        重命名插件
npm i gulp-uglify --save-dev        压缩插件
npm i gulp-sass --save-dev          sass插件
npm i gulp-minify-css --save-dev    压缩css文件插件
npm i browser-sync --save-dev       浏览器异步插件，browser加载进来是一个对象，下面有一个方法create()，他是一个服务器
把方法中的--save-dev全部改成-D就不需要再改package.json文件中的内容了，直接写入devDependencies

npm uninstall gulp -g          卸载gulp

gulp本地下载后package.json的配置

要将dependencies里的内容剪切到devDependencies中。

{
"name": "8.18",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {

},
"devDependencies": {
"gulp-concat": "^2.6.1",
"gulp": "^3.9.1",
"gulp-load-plugins": "^2.0.3",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"gulp-rename": "^2.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

但是所有加载插件的语句中–save-dev改为-D 就可以直接写入到devDependencies中。

gulp4中的语法

var gulp=require("gulp");
//在gulp4中默认每个任务都是异步执行的，所以在执行含有前置任务的任务时，要在每个前置任务中加入done()，如果不在前置任务中加done()，就会导致任务无法正常进行，系统会默认前置任务还未执行完，从而不能执行任务本身。但是promise任务中不需要再加done
gulp.task("a",function(){
return new Promise(function(resolve){
console.log("aaa");
resolve();
})
})
gulp.task("b",function(done){
console.log("bbb");
done();
})
gulp.task("default",gulp.series(["a","b"],function(done){
console.log("ccc");
done();
}))//有前置任务的写法

//写gulp侦听(watch)的时候，一定要加上done，否则它会认为你上个侦听一直在进行，当你更改侦听目录里的内容时，侦听便不再生效
gulp.task("default",function(){
gulp.watch("./js/*.js",gulp.series(function(done){
console.log("aa");
done();
}))
})

另一种方式安装gulp4方法，依然可以正常使用

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help
npm init -y初始化
在新建的gulpfile.js的中写入：

function a(done){
console.log("aaa");
done();
}
function b(done){
console.log("bbb");
done();
}
exports.a=a;
exports.b=b;
exports.default=gulp.series([a,b],function(done){
console.log("cc");
done()
});

搭建服务器更新css

安装过所有的插件之后
服务器：

var gulp=require("gulp");
var load=require("gulp-load-plugins")();
var browser=require("browser-sync").create(); //browser加载进来是一个对象，下面有一个方法create()，他是一个服务器
/*
存储css函数
加载sass文件夹下的所有scss文件
解析为sass
连接总和所有的css内容加载到main.css文件中
压缩该css文件
对该css文件重命名为main.min.css
存储在该路径下的dist文件夹下的css文件夹下
侦听一个end事件，当保存完成时触发browser.reload(重载)
记得最后return，否则在重载一次后不会停止函数，从而无法重复重载
*/
function saveCss(done){
gulp.src("./sass/*.scss")
.pipe(load.sass())
.pipe(load.concat("main.css"))
.pipe(load.minifyCss())
.pipe(load.rename("main.min.css"))
.pipe(gulp.dest("./dist/css/"))
.on("end",browser.reload);  //end:保存完成而不是load：加载完成
return done();
}

/*
默认导出该方法，
打开服务器
监视html页面，实时更新页面，也要done
监视scss页面，实时处理css文件
*/
exports.default=function(){
//首先开启服务器
browser.init({
server:"./",
port:4001
})
//监视html页面，有变化就更新页面
gulp.watch("./*.html",function(done){
browser.reload();
done;
});
gulp.watch("./sass/*.scss",saveCss)
}

客户端：
引入：

<link rel="stylesheet" href="./dist/css/main.min.css">