新奇的前端自动化构建

@文章来源：拉钩大前端就业训练营-念念

前端工程化

• 工程： 一个工程的生命周期
  • 工程立项，需求分析，产品原型，开发实施，测试部署，上线运行
• 工程化：完成项目过程中，用到的工具和技术
• 前端工程化：通过各种工具和技术，提升前端开发效率的过程
• 前端工程化包含内容：
  • 脚手架工具
  • 自动化构建
  • 模块打包
  • 标准化规范
  • 自动化测试
  • 自动化部署

Node.js 基础

• node.js 是给予 chromeV8 引擎的 javascript 运行时
• runtime(运行时-运行环境)
  • 浏览器就是 javascript 的一个运行环境
• 基于 chrome 的 V8 引擎
• Node.js 是除了浏览器之外还可以运行 javascript 的环境
• 浏览器端的 javascript:
  • 响应浏览器事件
  • 数据验证
  • DOM 操作
  • 不足：不能做文件操作
• Node.js 端的 javascript
  • Node.js 适合开发服务端的应用层(BFF)
    • 为网站，APP,小程序等提供数据服务
  • Node.js 适合用于开发前端方向的各种工具
  • Node.js 可以用来做桌面应用开发
    • 各种跨平台的桌面开发(vscode,typora,insomnia)
• Node.js 给 javascript 插上了全栈编程的翅膀

Node.js APIs

• 脚本模式：
  • node path/index.js 回车
• 交互模式
  • node 回车进入
  • 就可以直接编写 js 代码运行
  • .exit ctrl+C + 2 退出
• Node.js 全局对象是 global
  • 在交互模式下，声明的变量和函数都属于 global
• node.js 下全局函数：
  • parseInt/parseFloat/isNaN/isFinite/eval
  • setTimeout/clearTimeout
  • setInterval/clearInterval
  • setImmediate/clearImmediate 立即执行定时器 事件队列之前执行
  • nextTick 主线程的最后执行

Node.js 模块

• 模块(包)是 node.js 的基本组成部分
• 内置模块：官方提供的，跟随 node.js 一起安装
• 自定义模块：工程师自己写的
• 第三方模块： 社区维护的，需要单独下载才能使用

内置模块

• console

  • log 日志输出
  • table 表格形式输出
  • time timeEnd 计算程序执行的时间

• process 进程

  • 提供了 node.js 进程的信息并对其控制
  • version 查看 node 版本
  • arch 输出操作系统架构 X64 X32
  • platform 输出操作系统平台
  • cwd() 获取当前目录
  • env 环境变量
  • pid 获取进程编号 每次开启进程的时候会重置 进程运行的时候才有编号
  • kill(系统编号) 杀死进程

• path 路径 提供了路径相关的操作函数

  • 使用之前需要引入 path 模块
  • __dirname 获取 当前文件所在目录
  • __filename 获取当前文件的完整目录
  • extname(文件) 获取文件的扩展名
  • dirname(__filename) 获取路径中的目录部分
  • basename(__filename) 获取路径中文件名
  • join(__dirname,'a') 合并路径

• fs模块 文件操作

  • fs.writeFile('文件路径','写入内容',回调函数) 写文件 清空之前的文件再次写入
  • fs.readFile('指定目标文件所在路径',回调函数) 读文件 默认是十六进制 toString()转二进制
  • fs.unlink(要删除的文件,回调函数) 删除文件
  • fs.appendwrite(文件路径,写入内容,回调函数) 追加写入 如果想要换行 加一个 \n

• fs模块 目录操作

  • fs.mkdir(目录路径,回调函数) 创建目录
  • fs.rmdir(目录路径,回调函数) 删除目录 只能删除孔目录
  • fs.rename(旧名字,新名字,回调函数); 重命名
  • fs.readdir(目录路径,回调函数) 读目录
    • fs.stat(路径,回调函数) 判断文件
    • stat.isDirectory() 是否为目录
    • s
      tat.isFile() 是否为文件

• fs模块 同步函数 sync

  • writeFileSync
  • readFileSync
  • mkdirSync

• 文件流

  • 缓冲方式
  • 优点：
    • 内存效率提高
    • 时间效率提高
  • fs.createReadStream(文件) 读取流
  • fs.createWriteStream(文件) 写入流
  • readStream.pipe(writeStream); 把读取流通过管道传给写入流

• http模块

  • http.createServer 创建http服务
  • server.listen 监听端口

自定义模块

• nodejs中某一个单独的.js文件都是一个模块
• 每个模块中都有一个module变量，其代表当前模块
• module的exports属性是对外的接口
  • 只要导出(module.exports)的属性和方法才能被外部调用
• 使用时用require引入

第三方模块

• 社区维护的模块
• 前端工程化大部分都是第三方模块
• 需要单独去安装
• npm 概述 node包管理工具
  • npm install -g 包名 下载
  • npm uninstall -g 包名 卸载
  • npm init 初始化一个项目
  • --save --save-dev
    • --save -S 开发和线上都需要的包
    • --save-dev -D 开发环境需要的包

脚手架工具

• 脚手架自动创建项目结构
• yeoman
  • 创建项目的基础结构代码
  • yo是yaoman的命令行管理工具
  • 生成器：yaoman中具体脚手架 - 针对不同项目不同的脚手架
    • generator-webapp 网站项目
    • generator-venv vue项目
    • generator-rn-toolbox react native项目

自动化构建

• 构建：源代码 转 生产代码
• 为什么要构建：
  • less sass 转 css
  • es6+ 转 es5
  • 代码压缩
  • 代码风格统一
• npm scripts 允许在package.json文件中，使用scripts定义脚本命令
• babel 转换js
• 代码风格校验
  • 每个人写代码风格不一样
  • 项目提交时，需要保持统一的代码格式
  • eslint js风格
  • stylelint css风格
    • stylelint path/filename.css
    • stylelint */.css

gulp基础

• npm i -g gulp-cli

• npm init --yes

• npm install gulp -D

• gulpfile.js

• gulp

• gulp.serier(串行)

• gulp.paralle(并行)

• gulp的文件操作

  • src(源) - pipe(管道,可以使用多次) - dest(目标)

• 构建样式文件

  • gulp-less less转css
  • gulp-clean-css 压缩css
  • gulp-rename 重命名

• css hack 与 autoprefixer

  • 保证css的兼容性

• html

• images

• 文件清除