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">