# gulp-easy

**Repository Path**: ZZK-1989/gulp-easy

## Basic Information

- **Project Name**: gulp-easy
- **Description**: 已过时[废弃]
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-07
- **Last Updated**: 2021-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 修改自 lfyfly/gulp-easy 修改记录

- 2019-3-7 ：删除 pug 支持
- 2019-3-7 ：添加 gulp-file-include 支持 html 文件包含
- 2019-3-7 ：添加 compressing 支持打包 zip

# gulp-easy [github](https://github.com/lfyfly/gulp-easy.git)

## 1、简介

使用 gulp 搭建一个传统的多页面前端项目的开发环境

- 支持`scss` `es6`编译支持
- 支持开发环境和打包生成`sourceMap`
- 支持文件变动自动刷新浏览器，css 是热更新（css 改动无需刷新浏览器即可更新）
- 支持新增文件没无需重启 gulp，即可改动自动刷新浏览器
- 支持命令生成雪碧图和对应 css
- 支持 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、如何使用

### 2.1 下载项目

（1） `git clone https://github.com/lfyfly/dev-easy.git`或者下载 `zip包`

（2）删除项目下的因此目录`.git`文件夹，这是我的 commit 记录，所以删除

（3）`npm install` 安装依赖

（4）`npm run dev`

### 2.2 命令

### `npm run dev`

进入开发模式

### `npm run build`

打包命令

### `npm run start`

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

### `npm run sp`

把根目录下的 sprites 文件夹下的子目录内的所有文件夹中的 png 和 jpg 的图片，以子文件夹目录为单位生产雪碧图，文件名为子目录名

### 在执行完`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 只目录只是个例子，代表源码目录

#### 3.1 `src/static`

静态文件目录

#### 3.2 `src/static/_vendor`

第三方 js，css，iconfont 等

#### 3.3 `src/_scss`

scss 模块目录，里面的`.scss`文件不会被单独编译成 css 文件

#### 3.4`src/_pug`

pug 模块目录，里面的`.pug`文件不会被单独编译成 html 文件

#### 4.5 `src/_modules`

该目录里面的`.pug`,`.scss`文件不会被单独编译成 html 文件

## 4、功能配置文件

根目录下的`config.js`

```
module.exports = {
  srcPath: 'src',
  scss: true,
  babel: true,
  tmpPath: 'node_modules/__tmp__',
  build: {
    htmlmin: true,
    cssmin: true,
    jsmin: true,
    base64: 10 * 1024, // (bytes) 使用css中图片使用相对路径，否者无效
    cssSourcemap: true,
    jsSourcemap: true,
    cdn: 'http://your/cdn/url/',
    versionHash: true, // 版本hash
  },
  proxyTable: {
    '/api': 'http://localhost:3000',
    '/hehe': {
      target: 'http://localhost:3000',
      pathRewrite: {
        // 地址重写
        '^/hehe': '/api'
      }
    }
  }
}
```

## 5、功能配置项详解

> **如不需要使用某个配置项目，直接将其注释即可**

### srcPath

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

### pug

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

### 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<br>`css中图片地址必须为相对路径才会生效`<br> |
| 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'
      }
    }
  }
```

## 6、项目目录构建示例

### 6.1 Deom-0 见`src`目录

使用 html,css,js 构建项目

### 6.2 Deom-1 见`src-1`目录

使用 pug(可选用),scss,js 构建项目
将`config.srcPath`值设为`src-1`即可切换到该项目

## 7、其他

### 7.1 模块化？

推荐使用`sea.js`或`require.js`进行模块管理

### 7.2 为什么不在 gulp 中配置 eslint？

推荐使用编辑器插件进行提示，还可以配置保存时自动修复 eslint

### 7.3 js 中如何判断是否为开发模式

```
// 当前环境为开发环境
var isDev = !!document.getElementById('__bs_script__')
```

**注意：** isDev 只能在 body 标签内的 js 中这样获取，或者在`DOMContenLoaded`或`load`事件回调中初始化 isDev