# gulp-multipage-cli

**Repository Path**: JBPatrick/gulp-multipage-cli

## Basic Information

- **Project Name**: gulp-multipage-cli
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1、简介
gulp多页面前端开发环境

- 支持`scss` `es6`编译支持
- 支持开发环境和打包生成`sourceMap`
- 支持文件变动自动刷新浏览器，css是热更新（css改动无需刷新浏览器即可更新）
- 支持新增文件没无需重启gulp，即可改动自动刷新浏览器
- 支持eslint，使用的eslint插件是[eslint-config-alloy](https://github.com/AlloyTeam/eslint-config-alloy)
- 支持打包html，css，js图片压缩，css中小图片转base64
- 支持css，js文件版本hash值，文件无变动则版本hash不会改变，更好利用缓存
- 支持html中的css，js，img路径添加cdn域名前缀，css中的图片链接建议使用`相对路径`
- 支持代理

## 2、如何使用
 `npm install` 安装依赖

 `npm run dev`

### 2.2 命令

### 开发模式
`npm run dev`

### 打包命令
`npm run build`

### 打包并且以`dist`为根目录开启服务器查看效果
`npm run start`



### 在执行完`npm run build`后执行`npm run webp`
#### 默认情况下html中的`img[src]`会被处理成`img[data-src]`
- 当img的src为`http`开头则会被忽略该处理
- 当img的className中包含`not-webp`开头则会被忽略该处理

### `npm run lint`
eslint检测

### `npm run fix`
eslint修复


## 3、 目录结构
> src是源码目录，可以通过`config.srcPath`进行配置，以下src只目录只是个例子，代表源码目录
src
    static   ## 存放静态文件
        _module  ## 不打包该模块(里面的文件均为开发过程中使用、依赖)
            _scss  ## scss模块目录，在页面对应的scss文件中通过@import引用，里面的`.scss`文件不会被编译打包成css文件
            _js  ## 开发过程中使用的工具性js
                base64.js  ## 将html中的图标转为base64
        img  ## 项目中所有图片
        include  ## 公共部分的html片段,eg: header&footer
        lib  ## 第三方常用库,eg:jquery
        pages  ## 各页面对应的css&js
        public  ## 公共资源,eg:css初始化reset.css,页面公用js等
        xx.html ## 页面
    config.js  ## 项目功能配置文件
    gulpfile.js  ## gulp命令集合


## 4、功能配置项详解
> **如不需要使用某个配置项目，直接将其注释即可**

### srcPath

配置目录源文件目录，默认为`'src'`

### scss

- 值为`true`时，会开启对src内所有的`.scss`,`.sass`文件（除`src/_scss`外）编译成scss
- `src/_scss/`作为scss的模块目录，不会被单独编译为css文件

### babel

- 值为`true`时，会开启对`src`目录内所有的`.js`文件（除`src/static/vendor/`外）编译成es5
- babel配置文件，根目录下`.babelrc`文件

### tmpPath

- 默认值为 `'node_modules/__tmp__'`
- `npm run dev`作为`.pug`，`.scss`，`.js`文件编译的临时文件目录，和`src`同为静态文件目录，且优先级高于src目录

    ```
    browserSync.init({
        server: {
          baseDir: [config.tmpPath, 'src'],
        },
        middleware,
        port: 9000,
        online: false
      })

    ```
- 编译后文件访问：`src/static/public/public.scss`在html的访问路径为`/static/public/public.css`
- 每次运行`npm run dev` `config.tmpPath`都会被清理

###  打包配置项

config.build | 描述
---|---
htmlmin | 值为`true`时开启html压缩
cssmin | 值为`true`时开启css压缩
jsmin | 值为`true`时开启js压缩
base64 | Number类型，单位（bytes），当css图片大小小于该值时将转base64  `css中图片地址必须为相对路径才会生效`
cssSourcemap | 值为`true`时，生成cssSourcemap文件
jsSourcemap | 值为`true`时，生成jsSourcemap文件
cdn | 值为你的cdn地址
versionHash | 值为`true`时，生成css js文件版本hash值
proxyTable | 代理配置，[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)

#### proxyTable配置实例
```
  proxyTable: {
    '/api': 'http://localhost:3000',
    '/hehe': {
      target: 'http://localhost:3000',
      pathRewrite: {
        // 地址重写
        '^/hehe': '/api'
      }
    }
  }
```


### 5 js中如何判断是否为开发模式
```
// 当前环境为开发环境
var isDev = !!document.getElementById('__bs_script__')
```
**注意：** isDev只能在body标签内的js中这样获取，或者在`DOMContenLoaded`或`load`事件回调中初始化 isDev