# zwebproject

**Repository Path**: ckong/zwebproject

## Basic Information

- **Project Name**: zwebproject
- **Description**: zwebproject是一个前端开发工作环境，使用gulp流构建工具，browserSync作为浏览器资源同步注入，通过配置跨域接口地址实现本地接口对接调试，集合sass，babel，ejs，JS/Css压缩，文件时间戳等处理插件。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-18
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zwebproject

#### 项目介绍
zwebproject是一个前端开发工作环境，使用gulp流构建工具，browserSync作为浏览器资源同步注入，通过配置跨域接口地址实现本地接口对接调试，集合sass，babel，ejs，JS/Css压缩，文件时间戳等处理插件，开箱即用，方便前端开发者更好的进行开发。

插件列表：
1. [x] babel,es2015 (ES6 => ES5)
2. [x] autoprefixer (CSS前缀自动添加)
3. [x] clean-css (CSS压缩)
4. [x] SASS (CSS扩展)
5. [x] Ejs (HTML预处理模版引擎)
6. [x] gulp-replace (Html引入文件时间戳后缀添加)
7. [x] gulp-watch (项目文件监听)
8. [x] gulp-imagemin (图片压缩)
9. [x] browserSync (浏览器同步)
10. [x] http-proxy-middleware (接口联调中间件)
11. [ ] typeScript (JavaScript扩展)
12. [ ] gulp-uglify (JavaScript文件压缩)



#### 安装教程

##### 1. 安装依赖环境
```
npm install
```
国内用户可以使用[淘宝镜像](http://npm.taobao.org/)。
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
```
这可能会耗费比较久的时间，Mac OS用户可能需要等待node-sass的编译处理。
##### 2. 全局安装Gulp
```
npm install -g gulp
```
linux/Mac OS 用户请使用添加 sudo 或者 su，Window用户请使用管理员权限。

##### 3. 执行gulp
```
gulp
```
如果没有意外出现，系统将为自动打开本地页面（IP默认使用局域网，如：192.168.1.101）。  
至此，在Project目录下做文件修改将会自动同步到Build目录下，并且注入到浏览器（体验效果如使用Vue单页应用开发）。

#### 配置说明

##### 配置文件总览
```
exports.config = {
    host: 'localhost',                // ！不可用
    proxy: {
        url: 'http://localhost:1234', // 接口地址
        dir: '/api'                   // 接口目录
    },
    css: {
        less: false,                  // ！不可用
        sass: true                    // 默认启用
    },
    html: {
        ejs: true                     // 默认启用
    },
    min: {
        js: true,                     // ！不可用
        css: true,                    // true：启用，false：关闭
        image: true,                  // 默认启用
    },
    server: {
        port: 8989,                   // ！不可用
        ghost: true                   // 镜像模式（所有浏览器操作同步），true：启用，false：关闭
    }
}
```

##### 1. 接口配置
文件路径：config.js，配置项：proxy.url, proxy.dir
```
// 接口地址: http://localhost:1234/api
proxy: {
  url: 'http://localhost:1234', // 接口地址
  dir: '/api' // 接口目录
},
```
文件路径：project/js/lib/api.js，配置项：this.apiUrl
```
// 接口地址: http://localhost:1234/api
this.apiUrl = location.origin + '/api/'; // /api/ => dir + '/'
```

##### 2. Ejs模版全局变量配置
文件路径：app.json
```
{
    "title": "123"
}
// 符合Json格式即可，Ejs模版编译时会自动注入变量
```

##### 3. Docker自动部署
如果您的使用Docker，并且将项目上传至Git之后Docker会自动部署，那您可能需要上传整个工程，等待Docker自动构建，而不是上传构建完毕的（如Build目录），您可以尝试使用在Dockerfile中添加如下Shell指令
```
RUN npm install gulp -g \
    && npm install  \
    && mkfile 1b .BUILD_MODE \
    && gulp \
    && rm -rf node_modules \
    && rm -rf project \
```
此时build目录即是自动构建完成的目录，这个过程视网速以及容器配置而定，为了确保所有指令执行完毕，gulp会在所有任务执行后15s之后关闭进程，请尽量不要使用cnpm，这可能出现一些奇怪的错误。

#### 目录说明
> **build**：*生成目录*    
> **project**：*项目目录*    
> --------**js**：*JavaScript文件目录*    
> --------**css**：*Css文件目录*    
> --------**img**：*图片文件目录*    
> --------**Ejs**：*Ejs模版文件目录*    
> **app.json**：*Ejs全局变量JSON文件*    
> **config.js**：*Gulp自动化构建配置文件*    
> **gulpfile.js**：*Gulpfile，自动化构建主代码*    
> **LICENSE**：*MIT协议*    
> **package.json**：*npm包配置*    
> **README.md**：*项目说明*    

#### 联系我们
Mail：zion@igeede.com