# wpk

**Repository Path**: wazan/wpk

## Basic Information

- **Project Name**: wpk
- **Description**: 基于webpack，用node改造的工具包，命令式构建项目工程包。让你切图更专心
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-26
- **Last Updated**: 2021-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wpk

基于webpack，用node改造的工具包，命令式构建项目工程包。
> 导入背景图生成html、css代码  
>
> 自定义title、author  
>
> 交互生成插件代码  
>
> 打包  
  
## 目录
* [命令](#命令)
* [安装](#安装)
* [导入图片背景图生成代码](#导入图片背景图生成代码)
* [自定义title、author](#自定义title、author)
* [交互生成插件代码](#交互生成插件代码)
* [打包生产](#打包生产)
* [wpk拓展](#wpk拓展)

## [命令](#命令)
```
npm run head  --- 更改标题文案、设计制作名字
npm run add   --- 一键增加每个area的插件代码
npm run dev   --- 为项目开启一个服务器
npm run build --- 打包项目生成在dist里
```
## [安装](#安装)
```js
git clone
```
安装依赖
```js
npm i
```
#### 注意
装完依赖后如果`npm run dev`会报错，或许因为image-webpack-loader安装不正确，需要用cnpm单独安装下
```js
cnpm i image-webpack-loader -D
```

## [导入图片背景图生成代码](#导入图片背景图生成代码)
* psd切片，命名area，全部导出，删除area_01.jpg  
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p1.png?) 
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p2.png) 
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p3.png) 
* 图片复制到 wpk/src/images 
* 开启服务器（其他文件夹勿动，同时`只要`每次开启服务器相当于初始化工具包）
```js
npm run dev
```
此时已在 src/css/style.css 中生成代码，并且在 src/area/ 里生成每个area_x.jpg对应的 area_x.ejs模板 ，里面是你未来要存放的每个area里的html代码


## [自定义title、author](#自定义title、author)
```js
npm run head
```
此命令可以自定义专题的自定义title、author，可多次更改（开启服务器的同时修改可自动更新）
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p4.png) 
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p5.png) 

至此你已经可以 `npm run build` 在dist文件夹里 生成了你需要的html css文件，
由于webpack打包的原因 你需要在 dist/map/ 把未压缩混淆的代码文件拿出来覆盖 dist/css/style.css、dist/js/index.js，才能方便继续开发使用  
（到此已经为你节省了 看图算写高度等html、css代码的时间，如果你还想继续命令生成插件的代码可继续往下阅读）

## [交互生成插件代码](#交互生成插件代码)
跑起项目的同时另开一个终端用于输其他命令  
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p9.png)  


```js
npm run add
```
按照你切的出来的area里内容的位置，比如提交表单是在area_05,  
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p6.png)   
你可以打开运行的服务器`http://localhost:8088/`,发现自动更新到了视图上  
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p7.png) 
在选择需要的插件的时候`clean`可清除你想要的area上的html代码，但src/css/style、src/js/main/index.js上无法清除之前生成的插件代码，可手动删除下相关代码。  
（如果你想还原回开始未生成任何插件代码的情况的话，可以 `npm run dev`）
  
在生成插件初始代码的情况下你可以结合浏览器控制台修改下调整下css样式
## [打包生产](#打包生产)
```
npm run build
```
可生成打包后的文件，其中 dist/map/ 存放的就是方便你继续修改开发的文件 ,你可用来覆盖dist/js/index.js 、dist/css/style.css   
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p10.png) 

## [wpk拓展](#wpk拓展)
目前里面的插件模板只是存了几个，如果你想存放一些你常用的或想用的可以自行添加，按规范添加文件夹及代码即可：
* 首先新建一个插件名字的文件夹
* 文件夹里的文件名按下图规范命名
* 存放你的代码  
![图片](https://www1.pcauto.com.cn/test/wazan/201026/wpk/img/p8.png)