1.0.0 • Published 3 years ago
octopus-gulp-cli v1.0.0
octopus-gulp
安装
全局安装octopus-gulp
npm install -g octopus-gulp初始化项目
og create your-app等待一段时间，octopus-gulp会帮您自动生成一个your-app的工作目录
cd your-app && npm install打包
yarn build本地开发
yarn serve目录结构
├── src
│ ├── pages
| | ├── home
| | | ├── images # home页面图片资源
| | | ├── js # home页面js模块
| | | ├── scss # home页面图片资源
| | | ├── home.html
| | | ├── home.js
| | | └── home.scss
| | └── ... # 其他页面目录
| ├── assets # 静态资源
| ├── common
| | ├── images # 公用图片
| | ├── js # 公共js
| | └── style # 公用
├── .browserslistrc # 浏览器支持配置
├── .editorconfig # IDE配置
├── postcss.config.js # postcss config
├── gulpfile.js # gulp配置
├── README.md
└── package.json项目简介
- 基于gulp 的PC应用脚手架
- 适用场景：PC端轻量化应用
- 兼容性： 默认兼容至ie8+
技术方案
页面资源的引用
打包后的html文件会自动引入相应的js 文件， css文件
- 默认 home.html 会自动引入home.js, home.scss
<!--dist/home.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="__STYLE__">
<title>home</title>
</head>
<body>
<div class="home">
Home Page
</div>
<script src="__JS__"></script>
</body>
</html>- 其他公共资源需要单独引用
引入reset.css 示例
<!--dist/home.html-->
<!--引入示例-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="__STYLE__">
<link rel="stylesheet" href="__RESET_STYLE__"> // 引入资源
<title>home</title>
</head>
<body>
<div class="home">
Home Page
</div>
<script src="__JS__"></script>
</body>
</html>公共资源引入配置
/ 处理html
const handleHtml = () => {
const { src, dest } = gulp
return src(['.tmp/rev/**/*.json', './src/pages/**/*.html'])
.pipe(replace('__STYLE__', function() {
return `./css/${path.parse(this.file.path).name}.css`
}))
// TODO 按需引入公共style(可选)
.pipe(replace('__RESET_STYLE__', function() {
return `./css/reset.css`
}))
.pipe(replace('__JS__', function() {
return `./js/${path.parse(this.file.path).name}.js`
}))
.pipe(revCollector({
replaceReved: true,
}))
.pipe(flatten())
.pipe(dest('./dist/'))
.pipe(connect.reload())
}图片资源
- 作为一个轻量级的PC应用, 你的所有图片资源建议在css 文件中作为背景图片引入
- 本项目实现了图片的base64的转化功能，你可以在gulpfile.js中设置临界点
// 能被转成base64 的最大文件大小
const IMG_LIMIT_SIZE = 600 * 1024js 资源
- 支持 EsModule
- 支持 TreeShaking
- 支持 SourceMap
热更新
- 在server模式中，本项目实现了热更新，你对于任何js,css,html的改变都会引起页面的刷新
- 默认端口: 2345