前端工程化-01-Yeoman-Grunt

没有前端工程化遇到的问题

• 使用ES6+新特性，但是有兼容问题
• 使用Less/Sass/PostCss增强CSS的变成性，运行环境不能直接支持
• 使用或快画的方式提高项目的可维护性，运行环境不能直接支持
• 部署上线前需要手动压缩代码及资源文件
• 部署过程中需要手动上传代码到服务器
• 多人协作无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证
• 开发是需要等待后端服务接口提前完成
• …

工程化表现

一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」

graph LR
创建项目-->编码
编码-->预览/测试
预览/测试-->提交
提交-->部署
部署-->编码

工程化不等于某个工具

工程化的核心是对项目整体的规划和架构，工具只是落地规划和架构的一种手段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hYlfGtv4-1591460280651)(http://oss.ahh5.com/ahh5/md/202020200529221827.png)]

工程化包含

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范
• 自动化部署

脚手架工具概要

脚手架的本质就是自动的创建项目基础结构、提供项目规范和约定，脚手架工具可以快速的搭建特定项目的骨架。

约定

• 相同的组织结构
• 相同的开发范式
• 相同的模块化依赖
• 相同的攻击配置
• 相同的基础代码

常用的脚手架工具

• create-react-app
• vue-cli
• angular-cli

相同点

根据提供信息自动创建对应的项目基础结构，但一般适用于自身所服务框架的项目

Yeoman(老牌、强大、通用)

不针对于某一框架相对常用脚手架较为灵活。Yeoman可以搭配不同的generator创建不同的项目

缺点：过于通用不够专注

基础使用

安装

yarn global add yo

安装对应的generator ==> generator-node

yarn global add generator-node

通过yo运行generator

yo node 
# 输入项目名字
# 输入项目名字
# 输入项目主页
# 输入作者
# 输入邮箱
# 输入主页
# 输入关键词

Yeoman sub Generator

可以通过生成器的子集生成一些文件。例如eslint README

生成一个node cli

# 创建cli
yo node:cli  

# 安装新增加的依赖
yarn  

# 链接到全局
yarn link "yo-test-learn" 
# 或者
npm link yo-test-learn

# 输入下面命令即可看到
yo-test-learn --help 

Yeoman 使用步骤

• 明确需求
• 找到合适的 Generator
• 全局范围安装找到的 Generator
• 通过运行 Yo 运行对应的 Generator
• 通过交互命令交互填写选项
• 生成你所需要的项目结构

自定义Generator

基于Yeoman 搭建自己的脚手架

Generator 基本结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-msZgVvsb-1591460280657)(http://oss.ahh5.com/ahh5/md/202020200530230529.png)]

提供多个 sub generator 需要在app同级目录下创建一个新的目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjkNyYoP-1591460280660)(http://oss.ahh5.com/ahh5/md/202020200530230749.png)]

# 创建一个文件夹
mkidr generator-hello
# 进入目录
cd generator-hello
# 创建package.json
yarn init
# 安装 yeoman-generator 模块
yarn add yeoman-generator

创建 /generators/app/index.js

• 此文件为generator的核心入口
• 需要导出一个继承自 Yeoman Generator 的类型
• Yeoman Generator 工作时会自动调用我们在此类型中定义的一些生命周期方法
• 在这个文件中调用父类中的一些方法实现一些功能比如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    // yeoman 自动在生成文件中调用此方法
    writing() {
        // 通过文件读写方式向目标目录写入文件
        this.log('hello')
        // this.destinationPath 目前目录路径
        this.fs.write(
            this.destinationPath('temp.txt'),
            Math.random().toString()
        )
    }
}

通过 npm link 将模块安装到全局

找一个空目录运行 yo hello

.
└── temp.txt

根据模板创建文件

在app目录下创建一个templates目录

这是一个模板文件，内部使用EJS模板标记输入数据

app/templates/foo.txt

<%= title %>
<% if(success){ %>

    成功才会看到我

<% } %>

app/index.js

const Generator = require('yeoman-generator')

module.exports = class extends Generator{
    // yeoman 自动在生成文件中调用此方法
    writing(){
        // 模板文件路径
        const tmpl = this.templatePath('foo.txt')
        // 输出目标路径
        const output = this.destinationPath('foo.txt')
        // 模板数据上下文
        const context = {
            title:"hello word",
            success : true
        }
        // 输出模板文件
        this.fs.copyTpl(tmpl,output,context)
    }
}

完成目录结构

├── generators
│   └── app
│       ├── index.js
│       └── templates
│           └── foo.txt
├── package-lock.json
├── package.json
└── yarn.lock

找一个空目录运行 yo hello 即可看到输出的 foo.txt

内容如下

hello word

    成功才会看到我

接收用户输入数据

app/index.js 暴露出的类添加如下方法

prompting() {
    // 在此方法可以调用父类的 prompt() 方法对用户命令行询问
    return this.prompt([{
            type: 'input',
            name: 'name',
            message: 'your project name',
            default: this.appname //当前生成目录文件夹的名字
        }])
        .then(answers => {
            // answers => { name : 'user input value' }
            this.answers = answers
        })
}

修改 writing

writing() {
    // 模板文件路径
    const tmpl = this.templatePath('foo.txt')
    // 输出目标路径
    const output = this.destinationPath('foo.txt')
    // 模板数据上下文
    const context = {
        // 此处title 接收用户输入的值
        title: this.answers.name,
        success: true
    }
    // 输出模板文件
    this.fs.copyTpl(tmpl, output, context)
}

执行 yo hello
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xWzvFQFE-1591460280662)(http://oss.ahh5.com/ahh5/md/202020200531112617.png)]

输出文件内容如下

My project

    成功才会看到我

自己实现一个 Vue Generator

基础vue 构建我选择的还是cli，基于上面在做一些自己的配置就好了

# 创建文件夹
mkdir generator-zzy-vue
# 进入文件夹
cd generator-zzy-vue  
# 初始化项目
yarn init   
# 添加yeoman依赖   
yarn add  yeoman-generator 

手动创建一些文件

基本结构如下

├── generators
│   └── app
│       ├── index.js
│       └── templates
├── package.json
└── yarn.lock

创建一个vue模板

vue create tmp-project
rm -rf node_modules
rm -rf .git
rm yarn.lock

目录结构如下

├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

修改README.md

# <%= name %>

修改 /public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title><%= name %></title>
</head>

<body>
    <noscript>
        <strong>We're sorry but <%= name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

复制到generators/app/templates中

app/index.js

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    // yeoman 在询问用户环节会自动调用此方法
    prompting() {
        return this.prompt([{
                type: "input",
                name: 'name',
                message: "Your project name",
                default: this.appname
            }])
            .then(answers => {
                this.answers = answers
            })
    }
    // yeoman 自动在生成文件中调用此方法
    writing() {
        const templates = [".browserslistrc", ".editorconfig", ".eslintrc.js", ".gitignore", "README.md", "babel.config.js", "package.json", "public/favicon.ico", "public/index.html", "src/App.vue", "src/assets/logo.png", "src/components/HelloWorld.vue", "src/main.js", "src/router/index.js", "src/store/index.js", "src/views/About.vue", "src/views/Home.vue"]
        templates.forEach(filePath => {
            this.fs.copyTpl(
                this.templatePath(filePath),
                this.destinationPath(filePath),
                this.answers
            )
        })
    }
}

关于templates文件名获取, 可以通过node脚本实现

const fs = require('fs');
const path = require('path');
const _filePath = path.resolve('./templates');
const outFilePath = path.resolve('./arr');
let filePathArr = []
getFileRecursively(_filePath)

function getFileRecursively(filePath) {
    const files = fs.readdirSync(filePath)
    files.forEach(filename => {
        const filedir = path.join(filePath, filename);
        const stats = fs.statSync(filedir)
        if (stats.isFile()) {
            filedir.includes('.DS_Store') || filePathArr.push(filedir.replace(_filePath + '/', ''))
        }
        if (stats.isDirectory()) {
            getFileRecursively(filedir);
        }
    })
}
fs.writeFileSync(outFilePath, JSON.stringify(filePathArr))

注意不要将此方法放入 app/index.js 而是通过该脚本获取并输出到一个新的文件中。后面在手动复制到app/index.js中。因为不能确定 yeoman 的执行环境，以及不需要用户每次执行都去重新递归遍历所有文件

发布一个自己的npm包

• 建立一个公开仓库推荐github
• 创建一个npm 用户
• npm login
• npm publish

plop

一个小而美的脚手架工具，一般不会独立去使用，而是集成到项目之中区创建同类型的文件使用

plop基本使用

• 将plop模块作为项目开发依赖安装
• 在项目根目录中创建一个plopfile.js文件
• 在plopfile.js文件中定义脚手架任务
• 编写用于生成特定类型文件的模板
• 通过Plop提供的Cli运行脚手架任务

自动化构建

自动化通过机器代替手工完成某些操作，

自动化构建就是将源代码自动化构建为生成代码或者程序。

常见的自动化构建工具

• Grunt

  最早的自动化构建工具，但因为通过临时文件工作，所以工作效率较慢。

• Gulp

  使用频率较高，通过操作内存实现自动化构建，相对于Grunt速度快了很多且默认支持多任务

• Fls

  百度开源产品，继承项目常用自动化构建流程，例如资源加载、模块化开发、代码部署、性能优化，缺点不够灵活。

Grunt

基本使用

# 初始化项目
yarn init --yes   
# 添加grunt模块
yarn add grunt --dev

根目录下创建gruntfile.js文件

• Grunt入口文件
• 用于定义一些需要 Grunt 自动执行的任务
• 需要导出一个函数
• 函数需要接收一个grunt的形参，内部提供了一些创建任务是可以用到的 API

module.exports = grunt => {
    // 注册的任务  第一个参数为任务名称  第二个参数为任务描述(可以省略)  第三个是执行代码
    grunt.registerTask('foo', '任务描述', () => {
        console.log('hello word')
    })
    // 如果任务名称为default 那么yarn grunt 会默认执行
    grunt.registerTask('default', () => {
        console.log('grunt default task')
    })
}

# 运行grunt 不加参数执行默认任务
yarn grunt

# 指定任务执行
yarn grunt foo

# 查看任务描述
yarn grunt --help

default实际工作中是执行多个task的默认任务例如

module.exports = grunt => {
    grunt.registerTask('foo', 'foo任务描述', () => {
        console.log('hello foo')
    })
    grunt.registerTask('bar', 'bar任务描述', () => {
        console.log('hello bar')
    })
    grunt.registerTask('default', ['foo', 'bar'])
}

此时执行 yarn grunt 会执行 foo bar 两个任务

异步任务

module.exports = grunt => {
    grunt.registerTask('async-task', 'async-task任务描述', function() {
        // 需要定义一个done 值为this.async() 标记此任务为异步任务
        const done = this.async()
        setTimeout(() => {
            console.log('async-task workding')
            // 异步任务执行结束后需要通过 done() 触发程序截止
            done()
        }, 1000)
    })
}

标记任务失败

在函数内部 return false

module.exports = grunt => {
    grunt.registerTask('bad', 'bad任务描述', () => {
        console.log('This is a bad task')
        return false
    })
}

如果在任务列表中，则后续任务不会执行

module.exports = grunt => {
    grunt.registerTask('bad', 'bad任务描述', () => {
        console.log('This is a bad task')
        return false
    })
    grunt.registerTask('test', 'test任务描述', () => {
        console.log('This is a test task')
        return false
    })
    grunt.registerTask('default', ['bad', 'test'])
}
// 此时执行 yarn grunt 则会抛出 warnings 警告且 test不会执行

如果采用强制执行方式 --force 则所有的任务都会执行

yarn grunt --force

异步任务失败标记

module.exports = grunt => {
    grunt.registerTask('async-task', 'async-task任务描述', function() {
        const done = this.async()
        setTimeout(() => {
            console.log('async-task workding')
            // done 传入一个实参 false
            done(false)
        }, 1000)
    })
}

配置选项方法

基本用法

module.exports = grunt => {
    // 初始化config
    grunt.initConfig({
        foo: 'test'
    })
    grunt.registerTask('foo', 'foo任务描述', () => {
        // 获取config foo的键值
        const config_foo = grunt.config('foo')
        console.log( `hello ${config_foo}` )
        // 输出 hello test
    })
}

多目标模式

通过配置多个目标, 执行多个目标

module.exports = grunt => {
    grunt.initConfig({
        // 定义build
        build: {
            // 参数配置不会作为目标执行
            options: {
                test: false
            },
            // 定义两个目标
            css: '1',
            js: '2'
        }
    })
    // 通过 registerMultiTask 方法定义
    grunt.registerMultiTask('build', function() {
        // 拿出执行目标值与值
        const {
            target,
            data,
        } = this
        // 获取所有配置
        const { test } = this.options()
        console.log( `build ${target} ${data} ` )
        console.log(` test ${test} `)
    })
}

插件使用

安装一个文件清除的插件

yarn add grunt-contrib-clean -D 

module.exports = grunt => {
    grunt.initConfig({
        // 定义clean
        clean: {
            // 定义一个目标 清除temp 下的所有文件
            temp:'temp/**'
        }
    })
    // 清除指定文件任务 需要多个目标
    grunt.loadNpmTasks('grunt-contrib-clean')
}

常用插件

编译sass

# 安装 grunt-sass 及 sass 模块
yarn add grunt-sass sass -D 

// 引入sass 模块
const sass = require('sass')
module.exports = grunt => {
    grunt.initConfig({
        sass: {
            // 定义配置文件
            options:{
                // 定义处理方法
                implementation:sass,
                // 开启sourceMap文件
                sourceMap:true
            },
            // 定义个目标
            main: {
                // 定义文件
                files:{
                    // 输出路径   输入路径
                    'dist/css/main.css':'src/scss/main.scss'
                }
            }
        }
    })
    grunt.loadNpmTasks('grunt-sass')
}

npm grunt插件自动导出

# 安装插件
yarn add load-grunt-tasks -D 

// 引入loadGruntTasks
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
    // 将grunt传入loadGruntTasks 实现挂载所有的grunt模块
    loadGruntTasks(grunt)
}

编译es6语法

yarn add grunt-babel @babel/core @babel/preset-env -D 

const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
    grunt.initConfig({
        babel: {
            // 定义配置文件
            options: {
                presets:['@babel/preset-env'],
                // 开启sourceMap文件
                sourceMap: true
            },
            // 定义个目标
            main: {
                // 定义文件
                files: {
                    // 输出路径   输入路径
                    'dist/js/main.js': 'src/js/main.js'
                }
            }
        }
    })
    loadGruntTasks(grunt)
}

执行 yarn babel

修改自动更新

yarn add grunt-contrib-watch -D 

const loadGruntTasks = require('load-grunt-tasks')
const sass = require('sass')
module.exports = grunt => {
    grunt.initConfig({
        sass: {
            // 定义配置文件
            options: {
                // 定义处理方法
                implementation: sass,
                // 开启sourceMap文件
                sourceMap: true
            },
            // 定义个目标
            main: {
                // 定义文件
                files: {
                    // 输出路径   输入路径
                    'dist/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        babel: {
            // 定义配置文件
            options: {
                presets: ['@babel/preset-env'],
                // 开启sourceMap文件
                sourceMap: true
            },
            // 定义个目标
            main: {
                // 定义文件
                files: {
                    // 输出路径   输入路径
                    'dist/js/main.js': 'src/js/main.js'
                }
            }
        },
        watch: {
            js: {
                files: ['src/js/*.js'],
                tasks: ['babel']
            },
            css: {
                files: ['src/scss/*.scss'],
                tasks: ['sass']
            }

        },
    })
    loadGruntTasks(grunt)
    grunt.registerTask('default', ['sass', 'babel','watch'])
}