# gulp-automation

**Repository Path**: mebell/gulp-automation

## Basic Information

- **Project Name**: gulp-automation
- **Description**: 利用 Gulp 配置的前端项目自动化工作流，实现 scss js html image 的编译、压缩、打包、发布
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-28
- **Last Updated**: 2023-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gulp-automation

利用 Gulp4 配置的前端项目自动化工作流，实现：环境配置 less es6+ html image 的编译、压缩、打包、发布。

demo对应后台代码地址 `https://gitee.com/mebell/node-servers`

---

## 使用

> 本项目基于 node 运行。

拉取该项目到本地，依次运行

```
npm install 或者 cnpm install
npm run dev
```

根据提示即可访问

安装淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org
查看cnpm是否真安装成功 cnpm -v

## 指令

### 运行指令

```
开发 npm run dev || npm run start
测试 npm run test
预发 npm run release
正式 npm run build
```

## 说明

### 目录结构

```
gulp-automation
  ├─ dist                 发布目录，发布时会将编译压缩后的 css js html image 文件进行编译压缩，并存放于此
  ├─ rev-collector        资源映射文件夹
  ├─ src                  源代码
  │  ├─ assets            资源
  │  │  ├─ images         图片存放目录
  │  │  │  └─ private     多工程情况下私有目录(@1)
  │  │  ├─ jsons          json文件存放路径
  │  │  │  └─ private     多工程情况下私有目录(@1)
  │  │  ├─ scripts        script 存放目录
  │  │  │  └─ private     多工程情况下私有目录(@1)
  │  │  │  └─ public      通用 scripts 存放，此目录中的文件将会被压缩成一个文件输出到发布目录
  │  │  └─ styles         less 样式文件存放目录
  │  │     └─ private     多工程情况下私有目录(@1)
  │  ├─ library           第三方依赖目录，其中 js css 子文件直接输出到发布目录
  │  │  └─ source         第三方依赖源码，不会输出到发布目录
  │  └─ views             页面
  │     └─ include        公用页面存放目录
  │     └─ private        多工程情况下私有目录(@1)
  ├─ .eslintignore        es 语法检测忽略配置
  ├─ .eslintrc.js         es 语法检测配置
  ├─ .gitignore           git 上传忽略配置
  ├─ cdn.json             cdn配置栗子
  ├─ env-config.js        环境配置依赖
  ├─ gulpfile.js          gulp 配置
  └─ package.json         项目配置
```

说明
  @1.此目录对应 package.json >> envConfig.PRIVATE 配置的文件名，当运行对应命令时只打包private中对应文件夹中的文件

### 项目配置

#### package.json 配置

```
"name": "gulp-automation",            项目名称，            上传到七牛云将作为文件夹名称 ******************************************
"version": "1.0.0",                   版本号
"serve": {                            开发环境服务配置
  "port": 80,                         端口 默认80
  "open": true,                       是否打开浏览器
  "proxy": true,                      是否启用代理
  "indexPage": "/views/index.html"    入口文件
}
"envConfig": {                        环境配置
  "dev": {                            开发环境
    "API": "http://dev"               后台服务请求地址
    "THEME": "theme_blue",            换肤 <body class="<%= theme %>"> === <body class="theme_blue">
    "PRIVATE": "default"              私有的包 对应（src/assets/(images|scripts|styles)/private/default, src/views/private/default）
  },
  "test": {
    "API": "http://test",
    "THEME": "theme_blue",
    "PRIVATE": "default",         
    "QN": {                           七牛云配置（如需上传才需要配置）只需要配置其中一个
      "bucket": "bucket-name",
      "region": "Zone_xxx",           区域
      "prefix": "https://xxx"         资源前缀
    },
    "OSS": {                          阿里云OSS配置（如需上传才需要配置）
      "bucket": "bucket-name",
      "region": "oss-cn-xxx",         区域
      "prefix": "https://xxx"         资源前缀
    }
  },
  "release": ...,                     预发布环境
  "build": ...                        正式环境
},
"scripts": ...,                      运行指令（与环境配置匹配）
"devDependencies": {                 开发依赖模块
  "babel-core",                      是 babel 的核心包,使用 babel 必须安装
  "babel-eslint",                    eslint 解析器
  "babel-preset-env",                一个帮你配置 babel 的 preset ,根据配置的目标环境自动采用需要的 babel 插件
  "browser-sync",                    浏览器同步测试工具
  "cross-env",                       是运行跨平台设置和使用环境变量的脚本
  "gulp",                            自动化构建工具
  "gulp-babel":,                     babel 的 gulp 插件
  "gulp-clean",                      删除文件
  "gulp-concat",                     合并文件
  "gulp-eslint":,                    es语法检测
  "gulp-file-include",               使页面上的不同模块的代码可以分开编写，最后用命令整合起来
  "gulp-htmlmin",                    压缩 html 文件
  "gulp-less",                       处理 less 文件使其产出 css 文件
  "gulp-load-plugins",               从 package.json 文件中加载所需要的 gulp 插件,可以直接附加到选择的对象上,而不再需要每一个依次引入
  "gulp-minify-css",                 压缩 css 文件
  "gulp-plumber",                    防止因 gulp 插件的错误而导致管道中断, plumber 可以阻止 gulp 插件发生错误导致进程退出并输出错误日志
  "gulp-replace",                    字符串替换
  "gulp-rev",                        为静态文件随机添加一串 hash 值, 解决 cdn 缓存问题, a.css --> a-d2f3f35d3.css
  "gulp-rev-collector",              根据 gulp-rev 生成的 manifest.json 文件中的映射, 去替换文件名称, 也可以替换路径
  "gulp-sourcemaps",                 用来生成映射文件的一个插件，SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件
  "gulp-tap",                        用来处理当前执行的文件
  "gulp-template",                   替换变量以及动态 html
  "gulp-uglify",                     压缩混淆 js 文件
  "gulp-up-cdn",                     上传文件至cdn(七牛云或者阿里云oss)
  "http-proxy-middleware"            代理中间件,用于转发请求,将客户端发送的请求数据转发到目标服务器,再将响应输送到客户端
  "inquirer"                         命令交互
}
```

### 开发

#### 环境配置引入 

```
<script src="@/scripts/env-config.js"></script>
```

引入后 js 中使用 `__ENV_CONFIG__` 获取

#### 页面引入跳转

```
@include('**.html')
window.location.href = '@/views/index.html'
```

公用页面需要放到 `views/include` 目录中才能正常引用。

#### 图片和icon引入 如下

```
<link rel="shortcut icon" href="@/images/favicon.ico" />
<img src="@/images/**/*.*" />
```

`@/images/` 开头

#### 样式引入 如下

```
<link rel="stylesheet" href="@/styles/**/*.css">
```

`@/styles/` 开头

#### 脚本引入 如下

```
<script src="@/scripts/public.js"></script> // 通用 src/assets/scripts/public 文件夹中所有js的合并
<script src="@/scripts/**/*.js"></script> // 独立js文件
```

`@/scripts/` 开头

#### library 文件引入 如下

```
<link rel="stylesheet" href="@/library/*.min.css">
<script src="@/library/*.min.js"></script>
```

`@/library/` 开头
注意：引入 library 目录下文件 不含子目录中文件