前端工程化

概述

1.多人协作开发，无法硬性统一大家的代码风格从仓库中pull回来的代码质量无法保证
2.部分功能开发时需要等待后端服务接口提前完成
3.传统语言或语法的弊端
4.无法使用模块化/组件化
5.重复的机械式工作
6.整体依赖后端项目

脚手架工具概要

1.创建项目基础结构、提供项目规范和约定
相同的组织结构
相同的开发范式
相同的模块依赖
相同的工具配置
相同的基础代码

2.常用脚手架工具
react项目：create-react-app
vue项目：vue-cli
angular项目：angular-cli
Yeoman

Yeoman

网站:https://yeoman.io/generators/
1.yarn global add yo（必须要搭配generator使用）
2.yarn global generator-node
3.yo node
4.eslint和babel实现 cliyo node:cli
5.yarn link 全局命令使用
6.yarn 安装依赖
7.my-yeoman --help 使用

Yeoman使用步骤

1.明确你的需求
2.找到合适的generator
3.全局范围安装找到的generator
4.通过yo运行对应的generator
5.通过命令行交互填写选项
6.生成你所需要的项目结构

1.构建一个网页
yarn global add generator-webapp
2.运行这个generator
yo webapp

1.构建一个vue生成器目录
yarn init
yarn add yeoman-generator 提供生成器积累工具函数创建生成器更加便捷
2.创建一个generators/app/index.js 此文件作为generator的核心入口
需要导出一个继承自Yeoman Generator 的类型
Yeoman Generator在工作时会自动调用我们在此类型中定义的一些生命周期方法
我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能列如文件写入
3.yarn link 链接到全局范围

grunt、gulp和FLS

1.grunt
优点：最早的前端构建工具可以完成任何搭建工作
缺点：基于临时文件构建的读写次数过多构建速度慢
2.gulp
优点：基于内存实现的处理文件在内存中可同时执行多个任务使用方式直观易懂解决了grunt构建慢的问题
3.FLS（百度推行的）
绑定式的自由度不高

Grunt 基本使用

（1）准备工作

mkdir my-grunt
cd my-grunt
yarn init --yes  //初始化package文件

（2）安装gulp

yarn add grunt --dev //安裝gulp模块

（3）安装所需插件

//將sass转化为浏览器可识别的css文件
yarn add grunt-sass sass -dev
//将ECMAScript新特性转化
yarn add grunt-babel @babel/core @babel/preset-env --dev
//自动载入文件
yarn add load-grunt-tasks --dev
//监视文件变化
yarn add grunt-contrib-watch --dev
//清除指定文件夹下的文件
yarn add grunt-contrib-clean --dev
//浏览器
yarn add browser-sync --dev
//html文件编译处理
yarn add grunt-web-swig --dev

（3）创建gruntfile.js文件

//Grunt的入口文件
//用于定义一些需要Grunt自动执行的任务
//需要导出一个函数，接收一个grunt的参数
/*** yarn add grunt-contrib-clean* 自动清除临时文件*/
const sass = require("sass")
const loadGruntTasks = require("load-grunt-tasks")
const browserSync = require("browser-sync")
const bs = browserSync.create()module.exports = grunt => {grunt.initConfig({//sass转化为css功能sass: {options: {sourceMap: true, //设置后会生成相应的sourceMap文件implementation: sass},main: {files: {// 目标文件：源文件'dist/css/main.css': 'src/scss/main.scss'}}},//js转化功能babel: {options: {sourceMap: true,//设置后会生成相应的sourceMap文件presets: ["@babel/preset-env"]},main: {files: {// 目标文件：源文件'dist/js/app.css': 'src/js/app.js'}}},web_swig: {options: {swigOptions: {//缓存设置为falsecache: false},getData: function (tpl) {//模板文件的数据return { myGruntTitle: 'hello,grunt-web-swig' };}},main: {expand: true,cwd: 'src/',//源文件文件夹src: "**/*.html",//后缀名匹配dest: "dist/"//目标文件夹},},//监视功能watch: {js: {//文件地址files: ['src/js/*.js'],//执行的任务tasks: ['babel']},css: {//文件地址files: ['src/scss/*.scss'],//执行的任务tasks: ['sass']},html: {//文件地址files: ['src/*.html'],//执行的任务tasks: ['web_swig', 'bs-reload']}},//清除功能clean: {//所要清除的文件路径files: 'dist/**'}})// grunt.loadNpmTasks('grunt-sass')loadGruntTasks(grunt) //自动加载所有的grunt插件grunt.registerTask('default', ['clean', 'sass', 'babel', 'watch'])grunt.registerTask('bs-reload', function () {bs.reload()})grunt.registerTask('bs', function () {const done = this.async()bs.init({server: {port: 8080,// baseDir: 'dist',baseDir: ["dist", "public", "src"],files: 'dist/**',// open:false,routes: {'/node_modules': "node_modules"}}})})grunt.registerTask('compile', ['clean', 'sass', 'babel'])
}

（4）package.json

{"name": "my-grunt","version": "1.0.0","main": "index.js","license": "MIT","scripts": {// yarn clean ---->清除dist文件夹"clean":"grunt clean",// yarn compile ---->编译"compile":"grunt compile",//yarn reload ----->重载"reload":"grunt bs-reload"},"dependencies": {"@babel/core": "^7.10.4","@babel/preset-env": "^7.10.4","grunt": "^1.2.1","grunt-babel": "^8.0.0","grunt-sass": "^3.1.0"},"devDependencies": {"browser-sync": "^2.26.7","grunt-contrib-clean": "^2.0.0","grunt-contrib-watch": "^1.1.0","grunt-tasks": "^1.0.0","grunt-web-swig": "^0.3.1","load-grunt-tasks": "^5.1.0","sass": "^1.26.10"}
}

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

（1）创建目录
（2）创建 package.json

yarn init

{"name": "lrj-scaffolding", // 文件名 在全局使用时"version": "0.1.0","main": "index.js","bin": "cli.js", // 指定cli文件的入口文件: “bin”:"cli.js""author": "lrj","license": "MIT","dependencies": {"ejs": "^2.6.2",  //询问"inquirer": "^7.0.0" //添加模板引擎}}

（3）安装所需依赖

yarn/npm install

（5）创建cli.js文件

#!/usr/bin/env node
// 这段话的意思是让使用 node 进行脚本的解释程序，那下面的就可以使用 node 的语法了const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer'); // 命令行交互插件
const ejs = require('ejs'); // 模板引擎inquirer.prompt([{type: 'input',name: 'name',message: 'Project name?',default: 'my-project'},{type: 'input',name: 'desc',message: 'Project description?'}
])
.then(answers => {// 根据用户回答的结果生成文件// 拿到模板文件const tmplDir = path.join(__dirname, 'templates');// 目标目录const destDir = process.cwd();// 将模板下的文件全部转换到目标目录fs.readdir(tmplDir, (err, files) => {if (err) throw err;files.forEach(file => {// file => 文件相对于 templates 目录的相对路径// 通过模板引擎渲染文件ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {if (err) throw err;// 将结果写入目标文件fs.writeFileSync(path.join(destDir, file), result);});});})
});

（6）yarn link关联到全局变量
（7）使用

mkdir my-moudle //创建测试文件夹
cd my-moudle    //切换文件夹
lrj-scaffolding  //执行脚手架

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