# gulp-base-code

**Repository Path**: zmy0815/gulp-base-code

## Basic Information

- **Project Name**: gulp-base-code
- **Description**: 使用 Gulp 完成项目的自动化构建
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目思路
项目需求 主要文件 实现的具体步骤  所用到的具体插件

#### 项目需求
使用gulp工具构建项目，主要任务包括scss文件的转化，ECMAScript新特性的转化，还有swig模板页面的转化，并且转化上线的dist包。
并且优化构建过程，以及目录结构。

#### 主要文件
在gulpfile.js package.json

#### 具体步骤
基本功能
1. 实现sass文件的转换，用到插件是gulp-sass 下载需要切换taobao资源 
```
    yarn add gulp-sass --dev
```
2. ECMAScript新特性的转化，下载插件gulp-babel @babel/core  @babel/preset-env 配合转化，因为gulp-babel只是转换平台，而@babel/preset-env就是babel里面的转换插件集合
3. swig模板页面的转化需要用到gulp-swig插件 
4. 图片压缩/字体拷贝需要用到gulp-imagemin插件
5. 多个插件的使用，需要用到自动化加载插件的gulp插件，gulp-load-plugins
6. gulp去启动开发服务器,可以使用gulp支持的小工具browser-sync,去编译并且自动去刷新浏览器页面，这样就大大提高开发效率。
7. src下面页面更新浏览器跟着变化，就需要用到gulp的watch跟踪src下面文件的变化更新浏览器。
8. 文件中引用的node_modules..../bootstrap.css 等在发布到线上环境并没有引用就会报错，就需要用到gulp-useref,并且需要用到 gulp-if分辨文件类型 gulp-htmlmin gulp-uglify gulp-css 分别压缩拉取得文件。
9. 规划项目目录，调试develop开发命令，还有build构建线上文件夹。
10. 构建产生dist包时候，需要先删除dist包，gulp-clean/del工具。
10. 更详细具体步骤请看代码 ^ ^。

#### 具体插件
gulp-sass gulp-babel gulp-clean gulp-clean gulp-swig gulp-imagemin gulp-load-plugins gulp-useref browser-sync 等。