gulp原生及接口的使用

保持对代码的热爱并保持怀疑态度

const {src,dest,watch,series,parallel}=require("gulp");    //解构赋值，取得里面单个的方法
// 根据指定路径读取文件，得到指定文件的流对象
// src()

// 将拿到的流对象，转存到指定路径，生成真正的文件
// dest()

//watch自动转存，第二个参数是src的函数名

//series同步批量执行，parallel异步批量执行

function copyFn(cb){   //cb这个函数是为了表示结束
    src(["development/index.html"]).pipe(dest("dist"))   //开发环境的路径名.pipe要转到的文件名  ，.pipe相当于管道
    cb();
}
exports.copy=copyFn   //赋

    function watchFn(cb){
        watch(["development/index.html"],copyFn);     //watch表示自动转存，第一个参数是开发环境的地址，第二参数是转存的函数名
        cb();
    }
    
exports.watch=watchFn

function f1(cb){
    console.log("a");
    cb();
}
function f2(cb){
    console.log("b");
    cb();
}
function f3(cb){
    console.log("c");
    cb();
}
//同步的批量执行
exports.synAll=series(f1,f2,f3);
// 异步的批量执行
exports.asyncAll = parallel(f1, f2, f3);


cmd执行的时候进入下载了局部的文件夹，然后gulp  定义gulp的名字   如   gulp asynAll    对应
函数名与定义gulp指令的后面的函数相等
exports.asyncAll = parallel(f1, f2, f3);




插件
const {src, dest, watch, series, parallel} = require("gulp");

// 服务器插件
const connect = require("gulp-connect");
// 代理插件
const {createProxyMiddleware} = require("http-proxy-middleware");
// 合并插件
const concat = require("gulp-concat");
// 压缩插件
const uglify = require("gulp-uglify");
// 改名插件
const rename = require("gulp-rename");
// ES6转ES5插件
const babel = require("gulp-babel");
// sass转css插件
const sass = require("gulp-sass");


// gulp对象身上的方法
// gulp.src();
// gulp.dest();
// gulp.series();
// gulp.parallel();
// gulp.watch();

// 根据指定路径读取文件，得到指定文件的流对象
// src()

// 将拿到的流对象，转存到指定路径，生成真正的文件
// dest()

// 开发版：正在开发的版本，开发环境：development
// 运行版：可以被投入服务器使用的版本，运行环境：dist

// 文件的转存：从开发环境转存到运行环境
function copyFn(next){
    src(["development/index.html"]).pipe(dest("dist")).pipe(connect.reload());   //connect.reload()  连续刷新
    next();
}
exports.copy = copyFn;

// 自动转存：如果开发环境中的文件发生变化，自动转存到运行环境
function watchFn(next){
    watch(["development/index.html"],copyFn);
    next();
}
exports.watch = watchFn;

// 批量执行
function fn1(next){
    console.log("a")
    next()
}
function fn2(next){
    console.log("b")
    next()
}
function fn3(next){
    console.log("c")
    next()
}

// 同步的批量执行
exports.syncAll = series(fn1, fn2, fn3);
// 异步的批量执行
exports.asyncAll = parallel(fn1, fn2, fn3);


function serverFn(next){    //服务器代理
    connect.server({
        root:"dist",     //以哪个文件夹为服务器
        port:8888,       //端口号
        livereload:true,  //是否可以自动刷新
        middleware:function(){
            return [createProxyMiddleware("/api",{
                target: 'https://wanandroid.com/wxarticle',    //代理的目标地址
                changeOrigin:true,
                pathRewrite:{    //路径重写规则
                    '^/api':''
                }
            })]
        }
    })
    next();
}
exports.server = serverFn;

exports.serverWatch = parallel(serverFn, watchFn);

// js文件的合并，压缩，改名
function hygFn(next){
    src(["development/js/*.js"])
    .pipe(concat("index.js"))
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(dest("dist/js"))
    .pipe(uglify())
    .pipe(rename("index.min.js"))
    .pipe(dest("dist/js"))
    next()
}
exports.hyg = hygFn;


sass使用
function sassTocssFn(){
    return src(["../sass/dl.scss"])
    .pipe(sass().on("error",sass.logError))  //打印出错误信息，而不停止程序
    .pipe(dest("../css"))  //文件夹名
}
exports.sTc = sassTocssFn;

function watchSassFn(next){
    watch(["../sass/dl.scss"],sassTocssFn)   //监听路径
    next()
}
exports.ws = watchSassFn;