基于gulp 3.0 构建的前端脚手架工具,可用于快速生成前端项目。适合包含多入口文件的项目。支持es6
语法,scss
预处理,也可以根据需求自定义插件。
- npm/cnpm install
- npm run dev //开发环境
- npm run build //生产环境
- 在开发环境中,支持hotReload热加载(不用刷新浏览器,只要保存文件,浏览器就能自动刷新)
- 开发环境预览的默认地址是
localhost:8080/html/
- 再生产环境中,对
src
下的img
文件下的图片进行了压缩,减小图片的体积 - 使用了
file-include
进行模板编辑。可以支持html
魔板输出。file-include - 取消文件合并,减少文件大小。按需引用。也可以安装
gulp-contact
进行文件合并。 _include
文件夹用于存放模板文件,只会将对应的html
打包到目标文件,不会生成额外文件夹。- 生产环境资源名做了转义处理,每次打包都会生成最新的资源文件(
css
,js
),避免缓存。 - 生产环境
html
做了压缩处理,减少页面体积。 - 为了方便调试,加入了代理模式,防止跨域请求影响心情
因为gulp-connet-proxy这个插件不支持post请求,所以将代理插件换成了
http-proxy-middleware
设置代理demo
//需要将`gulpfile.dev.js`中修改成指定的代理域名
gulp.task("webserver", function() {
connect.server({
root: "./dist",
port: 8080,
livereload: true,
middleware: function(connect, opt) {
return [
proxy("/proxy/", {
target: "https://www.google.com/",
changeOrigin: true,
pathRewrite: {
"^/proxy/": ""
}
})
// proxy('/otherServer', {
// target: 'http://IP:Port',
// changeOrigin:true
// })
];
}
});
});
//api.js
//假设请求域名为这个
let baseUrl = "https://www.google.com/";
//代理域名应该设置成这样就可以正常使用
let devBaseUrl = "/proxy/";
happy coding !