You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constdata={menus:[...],pkg:require('./package.json')date:newDate()}constpage=()=>{returnsrc('src/*.html',{base: 'src'}).pipe(swig({ data }))//模板引擎的插件转换.pipe(dest('dist'))}
constimage=()=>{returnsrc('src/assets/images/**',{base:'src'}).pipe(imagemin()).pipe(dest('dist'))}constfont=()=>{returnsrc('src/assets/fonts/**',{base:'src'}).pipe(imagemin()).pipe(dest('dist'))}module.exports={
image,
font
}
脚手架工具
作用
创建项目基础结构、提供项目规范和约定
相同的组织结构、开发范式、模块依赖、工具配置、项目的基础代码
例:IDE创建项目的过程
通用脚手架工具剖析
React : create-react-app
Vue.js : vue-cli
Angular : angular-cli
作用:根据信息创建对应的项目于基础结构
Yeoman
一个通用的脚手架工具
Yeoman本质上就是一个Node.js 的CLI程序
Yeoman需要配合特定的Generator模块才能够生成对应的项目骨架
使用
全局安装yo
安装对应的generator,要搭配特定的generator
通过yo运行generator
Sub Generator
用于补充生成项目中的文件
添加cli结构
把模块链接到全局范围,使之成功一个全局模块包
步骤
开发脚手架 / 开发Generator
自定义Generator
步骤
创建一个package.json
安装一个提供工具函数的生成器模块
创建generators\app\index.js,作为Generator的核心入口,需要导出一个继承自Yeoman Generator的类型。Yeoman Generator在工作时会自动调用我们在此类型中定义的一些生命周期方法,我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能:文件写入
根据模板创建文件
动态接收用户输入
Vue Generator案例(略)
发布Generator(略)
淘宝npm镜像源是只读的,不能发布
Plop
集成到项目之中,创建同类型的项目文件,提高每次我们在项目创建文件时的效率
示例:根据模板创建新的文件
定义脚手架任务:
模板文件书写:
命令行:
总结
脚手架工作原理(自定义一个小型脚手架)
脚手架的工作过程:
通过命令行交互询问用户问题
根据用户回答的结果生成文件
步骤:
创建一个package.json
安装项目所需要的依赖
指定cli入口文件:通过package.json中的bin字段指定
cli.js
模板文件:
templates/index.html
templates/style.css
命令行创建一个空文件夹test进行测试
自动化构建系统
工具:
自动化构建工具:构建转换那些不被支持的**“特性”**
初体验
sass
步骤:
NPM Scripts:实现自动化构建工作流最简方式
常用的自动化构建工具
Grunt
default命名任务可以自动调用
默认支持同步模式,使用异步模式必须要使用this.async()得到一个回调函数
标记任务失败
配置任务:可以通过initConfig配置属性,任务通过config获取所设属性
多任务模式:让任务根据配置形成多个任务
Grunt插件
实现常见的构建任务
可以在package.json中对命令进行封装,方便使用
此时命令行运行,便可以自动构建文件
Gulp
取消了同步代码模式,每个任务都必须是异步的任务,当任务结束之后需要调用回调函数或者其它方式
创建组合任务:并行parallel、串行series
三种异步任务
核心工作原理
输入:读取流 => //src
加工:转换流 => //dest
输出:写入流
案例1:基于Glup写一个自动化构建项目
https://github.com/zce/zce-gulp-demo
文档框架:
样式 / 脚本 / html编译任务
① 样式编译任务
② 脚本编译任务
③ html编译任务
④ 三个任务同时执行
字体 / 图片文件转换
其它文件 / 文件清除
自动加载插件
使用load-plugins加载插件
开发服务器 / 监视变化
构建优化
※ 如果页面不刷新,是因为swig模板引擎缓存的机制导致页面不会变化,此时需要额外将swig选项中的cashe设置为false
useref文件引用处理
合并构建注释内容到一个js文件中
构建注释全部去掉,把构建注释里的内容包含到一个文件中
在useref中进行文件压缩(html / js / css)
需要判断什么文件
重新规划构建过程
build:上线之前执行的任务,最终构建的文件放到dist中
develop:开发过程执行的任务,临时文件放在temp中
案例2:封装工作流 / 构建多个项目
即,提取一个可复用的工作流
glupfile + gulp = 构建工作流
gulpfile + gulp CLI = my-pages
The text was updated successfully, but these errors were encountered: