/fed-e-task-02-01

Primary LanguageHTML

简答题

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

  • 认识：
    1. 解决传统语言或语法的弊端
    2. 可以使用模块化/组件化
    3. 避免重复的机械式工作
    4. 代码风格统一、质量保证
    5. 避免依赖后端服务接口支持
    6. 避免整体依赖后端项目
  • 问题和价值：
    1. 之前的传统项目中，只能书写css和es5的代码，非常的不便利。现在通过sass babel等插件可将scss和es6等代码打包，提高开发效率。
    2. 前几天在开发一个小程序项目出现一个问题，当代码包大于2M时是无法进行手机预览的，检查代码后发现图片体积过大，当时是手动把图片进行了压缩，切实体会了什么叫重复的机械式工作。现在可以通过gulp-imagemin对所有的图片实现自动压缩，解放劳动力。
    3. 在开发大型项目时，后端接口的开发耗时很长。前端在开发完成后可能会被接口pending。所以在项目中使用了mockjs，前端模拟端口实现，极大的提升了开发效率。

2. 你认为脚手架除了为我们创建项目结构，还有什么更深的意义？

现如今主流的前端脚手架工具都是通过NodeJs编写，比如vue-cli、create-react-app等。他们的功能都是生成一个通用的项目结构目录，并配上构建、编译、检查等功能。脚手架大大减少了我们的重复性工作，同时保证了项目代码解构的风格统一，很利于后期维护。同时，他们也让入门开发者无需关心webpack babel等配置，只需要写代码和进行一些简单的配置，提升开发效率。

编程题

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

  1. 过程
  • 创建Node Cli入口文件
  • 创建模板目录保存项目结构
  • 通过命令行交互询问用户问题
  • 根据用户回答的结果生成文件
  1. 脚手架实现
  • 代码路径：code/node-cli-sample
  • 通过yarn link后即可在全局使用node-cli-sample创建项目

2. 尝试使用 Gulp 完成项目的自动化构建

  1. 项目目录：code/pages-boilerplate
  2. 视频路径：gulp自动化构建演示

3. 使用 Grunt 完成项目的自动化构建

  1. 项目目录：code/pages-boilerplate