[fed-task-02-01]开发脚手架及封装自动化构建工做流

时间 2020-06-22

标签 fed task 开发脚手架封装自动化构建栏目软件设计繁體版

原文原文链接

简答题

一、谈谈你对工程化的初步认识，结合你以前遇到过的问题说出三个以上工程化可以解决问题或者带来的价值。

工程化是一个能够提高开发体验、提升开发效率和质量的规划或者工做流架构，一切以提升效率、下降成本、质量保证为目的的手段都属于工程化。javascript

工程化带来的价值：css

开发时可使用 ES6+ 新特性，经过工程化的手段将新语法转换成兼容性好的语法，而后发布
可使用热更新提高开发体验和效率，能够将代码压缩等这样重复机械的工做交给计算机完成
团队协做开发时，可使用一些编码规范检查的工具，使得项目代码风格统一，质量获得保证
可使用 Mock.js 这样的插件完成假数据的编写，开发阶段时，让前端能够不依赖后端接口去完成相应工做

二、你认为脚手架除了为咱们建立项目结构，还有什么更深的意义？

更深的意义在于，脚手架也为咱们提供了项目规范和公共约定。包括相同的组织结构、相同的开发范式、相同的模块依赖、相同的工具配置、相同的基础代码等等，对于公司里的大多数产品，前端均可以使用同一套脚手架，不只能够统一各个项目，当项目成员切换团队时，也能够直接上手，提升效率，相关模块依赖更新或者配置须要改动时，能够一步到位更新全部产品，更利于维护。前端

编程题

一、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具

脚手架的实现流程vue

经过命令行交互询问用户问题；
根据用户回答的结果，再结合一些模板文件，最后生成项目结构。

基于 NodeJS 的自定义小型脚手架工具 lxc-scaffolding，参见 https://github.com/luxiancan/...java

二、尝试使用 Gulp 完成项目的自动化构建

参见 https://github.com/luxiancan/...node

三、使用 Grunt 完成项目的自动化构建

还没完成。。。react

项目文件说明

https://github.com/luxiancan/...git

notes : 笔记
lxc-scaffolding : 使用 NodeJS 完成的一个小型脚手架
lxc-gulp-proj : 使用 Gulp 完成项目的自动化构建案例
introduce_video.m4v : 实现思路的视频介绍

学习笔记

前端工程化

经过工程化提高战斗力github

工程化主要解决的问题

传统语言或语法的弊端
没法使用模块化、组件化
重复的机械式工做
代码风格统1、质量保证
依赖后端服务接口支持
总体依赖后端项目

一切重复的工做都应该被自动化

建立项目 => 编码 => 预览/测试 => 提交 => 部署vue-cli

工程化不等于工具

一些成熟的工程化集成

create-react-app
vue-cli
angular-cli
gatsby-cli

脚手架工具

前端工程化的发起者

脚手架工具的本质做用：建立项目基础结构、提供项目规范和约定。

相同的组织结构
相同的开发范式
相同的模块依赖
相同的工具配置
相同的基础代码

经常使用的脚手架工具

React 项目 -> create-react-app
Vue 项目 -> vue-cli
Angular 项目 -> angular-cli

它们能够根据信息建立对应的项目基础结构

Yeoman: 一款通用型脚手架工具，建立项目时，能够根据模板生成对应的项目结构，很灵活、易于扩展

Plop: 用于在开发过程当中，建立一些特定类型的文件

Yeoman

Yeoman 基础使用

在全局范围安装 yo

$ npm install yo --global # or yarn global add yo

安装对应的 generator

$ npm install generator-node --global # or yarn global add generator-node

经过 yo 运行 generator

$ cd path/project-dir
$ mkdir my-module
$ cd my-module
$ yo node

Yeoman 使用步骤总结

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

自定义 Generator

Generator 基本结构

├── generators/ ·········································· 生成器目录
│   ├── app/ ············································· 默认生成器目录
│   |    └── index.js ···································· 默认生成器实现
|   └── component/ ······································· 其余生成器目录
│        └── index.js ···································· 其余生成器实现
└── package.json ········································· 模块包配置文件

自定义 Generator 的详细操做步骤：

1.建立 generator 文件目录

$ mkdir generator-lxc-test
$ cd generator-lxc-test

2.给项目初始化一个 package.json
$ npm init -yes # or yarn init -yes

3.安装 yeoman 依赖
$ yarn add yeoman-generator

4.新建 generator 入口文件
$ code generators/app/index.js

// 此文件做为 Generator 的核心入口
// 须要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工做时会自动调用咱们在此类型中定义的一些生命周期方法
// 咱们在这些方法中能够经过调用父类提供的一些工具方法实现一些功能，例如文件写入

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
    prompting () {
        return this.prompt([
            {
                type: 'input',
                name: 'name',
                message: 'Your project name',
                default: this.appname // appname 为项目生成的目录名称
            }
        ])
        .then(answers => {
            // answers => { name: 'user input value' }
            this.answers = answers;
        });
    }
    // Yeoman 自动在生成文件阶段调用此方法
    // 咱们这里尝试往项目中写入文件
    writing () {
        this.fs.write(
            this.destinationPath('temp.txt'),
            Math.random().toString()
        )
    }
}

5.若是使用到模板，须要在 app 目录下新建 templates 目录存放模板文件，使用 EJS 语法写入变量

这是一个模板文件
内部可使用 EJS 模板标记输出数据
例如：<%= title %>

其余的 EJS 语法也支持

<% if (success) { %>
哈哈哈
<% }%>

6.完成 index.js 后，将咱们建立的 generator 连接到全局，在 generator-lxc-test 目录下执行：
$ yarn link

7.使用咱们建立好的 generator

$ cd path/project-dir
$ mkdir my-test-proj
$ cd my-test-proj
$ yo lxc-test

Plop

一个小而美的脚手架工具，通常用于建立项目中特定类型文件的小工具；
能够大大提升咱们在项目中建立重复文件的效率；
通常不会独立使用，会集成到项目中，自动化的建立同类型的文件；

Plop 的基本使用

1.安装 plop
$ yarn add plop --dev

2.在项目根目录下建立模板文件 plop-templates/component.hbs

<template>
    <div class="{{name}}">
        <h1>{{name}} Component</h1>
    </div>
</template>

<script>
    export default {
        name: '{{name}}',
        data() {
            return {};
        },
    }
</script>

<style scoped lang="scss">
    .{{name}} {}
</style>

3.在项目根目录下建立 plop 入口文件 plopfile.js

// plopfile.js
// Plop 入口文件，须要导出一个函数
// 此函数接收一个 plop 对象，用于建立生成器任务
module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add', // add 表明添加文件
        path: 'src/components/{{name}}/{{name}}.vue',
        templateFile: 'plop-templates/component.hbs'
      }
    ]
  })
}

4.利用咱们刚刚注册的生成器的名字启动 plop
$ yarn plop component

自动化构建

一切重复工做本应自动化

源代码 => 自动化构建 => 生产代码

自动化构建工做流

做用：脱离运行环境兼容带来的问题
使用提升效率的语法、规范和标准
- ECMAScript Next
- Sass
- 模板引擎
构建转换那些不被支持的特性

自动化构建初体验

利用 package.json 中的 script 属性，配置一些简单的自动构建命令

"scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start": "run-p build serve"
  },

经常使用的自动化构建工具

Grunt ，最先的前端构建系统，工做过程是基于临时文件实现的，因此构建速度相对较慢，插件生态很是完善
Gulp ，构建是基于内存实现的，支持同时执行多个任务，效率较高，使用方式更直观易懂，插件生态也很完善
FIS ，百度的前端团队推出的前端构建系统，至关于捆绑套餐，将一些典型的需求都集成在内部

Grunt 的使用

Grunt 的基本使用

先要安装 grunt ，yarn add grunt
在项目根目录建立 Grunt 的入口文件 gruntfile.js
用于定义一些须要 Grunt 自动执行的任务
须要导出一个函数
此函数接收一个 grunt 的形参，内部提供一些建立任务时能够用到的 API

// gruntfile.js
module.exports = grunt => {
    grunt.registerTask('foo', () => {
        console.log('hello grunt~');
    });

    grunt.registerTask('bar', '任务描述', () => {
        console.log('other task~');
    });

    grunt.registerTask('default', ['foo', 'bar']);

    // 执行异步任务
    grunt.registerTask('async-task', function () {
        const done = this.async();
        setTimeout(() => {
            console.log('async task working~');
            done();
        }, 3000);
    });
}

Grunt 标记任务失败

在 registerTask 第二个参数，也就是回调函数里 return false 便可
处理多个任务，其中一个任务失败的状况，能够用 --force 命令强制执行全部任务
异步任务，标记失败的处理：const done = this.async(); ... done(false);

Grunt 的配置方法

使用 grunt.initConfig() 这个方法进行配置
在 registerTask 第二个参数，也就是回调函数里经过 grunt.config('foo') 获取配置

module.exports = grunt => {
    grunt.initConfig({
        // foo: 'bar'
        foo: {
            bar: 123
        }
    });
    grunt.registerTask('foo', () => {
        // const foo = grunt.config('foo');
        // console.log(foo); // bar
        const bar = grunt.config('foo.bar');
        console.log(bar); // 123
    });
}

Grunt 多目标任务

多目标模式，可让任务根据配置造成多个子任务
经过 grunt.registerMultiTask('build', function () {}) 执行多任务
经过 grunt.initConfig({ build: {...} }) 配置多个子任务

Grunt 插件的使用

先下载相关插件 yarn add grunt-contrib-clean
经过 grunt.loadNpmTasks('grunt-contrib-clean') 导入插件
经过 grunt.initConfig() 配置插件

module.exports = grunt => {
    grunt.initConfig({
        clean: {
            // temp: 'temp/app.js'
            // temp: 'temp/*.txt'
            temp: 'temp/**'
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
}

Grunt 经常使用插件介绍

yarn init -yes
yarn add grunt grunt-sass sass --dev
建立 gruntfile.js 文件
yarn grunt sass

yarn add grunt-babel @babel/core @babel/preset-env --dev
yarn add load-grunt-tasks --dev

Gulp 的使用

Gulp 的基本使用

yarn init -yes
yarn add gulp
建立 gulpfile.js 文件
yarn gulp my-task 执行指定任务
yarn gulp 执行默认的 default 任务

// gulpfile.js  gulp 的入口文件

exports.foo = done => {
    console.log('foo task working~');
    done(); // 标识任务完成
}
exports.default = done => {
    console.log('default task working~');
    done();
}

// gulp 4.0 版本以前，建立任务的方式
const gulp = require('gulp');
gulp.task('bar', done => {
    console.log('bar working~');
    done();
});

Gulp 的组合任务

const { series, parallel } = require('gulp');
const task1 = done => {
    setTimeout(() => {
        console.log('task1 working~');
        done();
    }, 1000);
}
// ...
// 建立串行任务
exports.foo = series(task1, task2, task3);

// 建立并行任务
exports.bar = parallel(task1, task2, task3);

Gulp 的异步任务

exports.promise = () => {
    console.log('promise task~');
    return Promise.resolve();
}
exports.promise_error = () => {
    console.log('promise task~');
    return Promise.reject(new Error('task failed!'));
}

const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve, time);
    });
};
exports.async = async () => {
    await timeout(1000);
    console.log('async task~');
}

// 处理文件流
const fs = require('fs');
exports.stream = done => {
    const readStream = fs.createReadStream('package.json');
    const writeStream = fs.createWriteStream('temp.txt');
    readStream.pipe(writeStream);
    readStream.on('end', () => {
        done();
    });
}

Gulp 构建过程核心原理

输入 => 加工 => 输出读取流 => 转换流 => 写入流