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指令执行后 服务器启动,可以通过设定的端口实现对服务器的访问,提高了我们测试的效率;