Js学习——gulp

Js学习——gulp

gulp是一个常见的自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。其他常见的前端构建工具还有Grunt，不过相比较gulp来说，比较老旧，功能少，更新少，插件少。
gulp全局安装 只需要安装一次
安装指令 :

npm install gulp-cli -g

局部gulp : 给gulp提供核心功能的支持; (每个项目都需要重新安装)
安装指令 :

npm install gulp --save-dev

基本环境测试指令: gulp -v

让我们根据 process.argv 判定应该加载哪一个配置文件

ar mode = process.argv[2]; // 可以获取用户输入的执行;

// 根据用户指令加载响应的配置文件;
console.log(mode);

我们可以根据process.argv[2]获得gulp要执行的指令从而实现模块的分割，从而建立多个不同的模块dev模块（实行指令的执行），gulpfile模块（辨别输入的指令）
gulfile模块

var mode = process.argv[2]; // 可以获取用户输入的执行;

// 根据用户指令加载响应的配置文件;
console.log(process.argv);
console.log(mode);
switch( mode ){
    case "dev" : 
        require("./gulpfile.dev.js");
        break;
    case "build":
        require("./gulpfile.build.js");
}

Dev模块

et gulp = require("gulp");
// 引入模块;
let connect = require("gulp-connect");
let proxy   = require("http-proxy-middleware").createProxyMiddleware;

// 服务器配置文件;
let connect_options = {
    root : "./dist",
    port : 3000,
    // 自动刷新
    livereload : true,
    middleware : function(){
        // 返回值必须是数组;
        // 默认访问的路径 : http://localhost/pxx
        // 被处理之后的路径 : 代理路径/pxx;
        // 重写路径 : /pxx => ""; 代理路径
        return [ 
            proxy( "/pxx" ,  {
                target : "https://apiv2.pinduoduo.com/api/gindex/subject/limited/goods",
                changeOrigin : true,
                pathRewrite : {
                      "/pxx": ""
                }
            }),
            proxy("/dt", {
                target :" https://www.duitang.com/napi/blog/list/by_filter_id/",
                changeOrigin : true,
                pathRewrite : {
                    "/dt": ""
                }
            })
        ]
    }
}
// 依赖第三方模块;

gulp.task('connect' , async ()=> {
    connect.server(connect_options);
});
  
gulp.task("html" , async ()=>{
    // 刨除部分文件不做操作;
    gulp.src(["./src/html/**/*.html","!./src/html/**/header.html"]) // src 拿出index.html变成工作了流;
    .pipe(gulp.dest("./dist/")) // 操作工作流 => 转存操作;
    .pipe(connect.reload())
});

gulp.task("javascript" , async()=>{
    gulp.src(["./src/javascripts/**/*.js"])
    .pipe(gulp.dest("./dist/javascripts"))
    .pipe(connect.reload())

});
gulp.task("css" , async()=>{
    gulp.src(["./src/stylesheets/*.css"])
    .pipe(gulp.dest("./dist/stylesheets"))
    .pipe(connect.reload())
});

gulp.task("watch",async ()=>{
    gulp.watch(["./src/html/**/*.html"] , gulp.series("html"));
    gulp.watch(["./src/javascripts/*.js"] , gulp.series("javascript"));
    gulp.watch(["./src/stylesheets/*.css"] , gulp.series("css"));
})

gulp.task("dev", gulp.parallel("watch", "connect" ,gulp.series("html","javascript","css")));

Dev指令执行后 服务器启动，可以通过设定的端口实现对服务器的访问，提高了我们测试的效率；