# fed-e-task-02-01

**Repository Path**: zhangxiaofeng66/fed-e-task-02-01

## Basic Information

- **Project Name**: fed-e-task-02-01
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 一、Node-cli构建过程

 1、创建package.json文件
```
yarn init
```
2、在package.json文件中新增bin字段

3、新建bin/index.js

4、下载inquirer用户与命令行交互工具
```
yarn add inquirer --dev
```
5、编写node-cli逻辑

6、将编写好的cli链接到全局
```
yarn link
```

#### 二、gulp自动化构建过程

1、在项目跟目录下新建gulpfile.js文件

2、安装gulp包

```
yarn add gulp --dev
```
3、编写自动构建任务

```
const { src, dest } = require('gulp');
...

```
4、安装项目需要的依赖包

```
yarn add gulp-sass gulp-imagemin gulp-babel --dev

// 以及babel的核心模块
yarn add @babel/core @babel/preset-env --dev

<!-- 为了自动引入包，不需要我们一个一个去引入，我们还需要下载自动导入的包 -->

yarn add gulp-load-plugins --dev
```
5、编写sass，js，以及图片压缩构建任务

```
const { src, dest } = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const plugins = loadPlugins();

// 样式编译
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src'})
    .pipe(plugins.sass())
    .pipe(dest('dist'))
}

// 脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

// 图片压缩
const image = () => {
  return src('src/assets/images/**', { base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}
module.exports = {
  style,
  script,
  image
}
```

6、模板文件的处理以及页面引入node-modules里资源的提取

```
// 模板文件的处理
yarn add gulp-swig --dev

// node-modules资源提取
yarn add gulp-useref --dev
```

7、编写模板文件任务合资源提取任务

```
...

// 页面编译
const page = () => {
  return src('src/*.html', { base: 'src'})
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'))
}
/ 处理html引入的node-modules的css,js
const useref = () => {
  return src('dist/*.html', { base: 'dist' })
    .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
    .pipe(dest('dist'))
}

...
```
8、其他资源文件任务

```
...

// font压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

// 静态文件
const extra = () => {
  return src('public/**', { base: 'public'})
    .pipe(dest('dist'))
}

...
```
9、将所有任务通过parallel/方法去执行, 由于node-modules资源的提取需要在页面构建完成以后执行，所以需要series方法按顺序去执行useref任务

```
...

const complie = parallel(style, script, image, font, page);
const build = series(clean, parallel(complie, extra), useref)

module.exports = {
  build,
}

```