自动化构建

·  阅读 70

简介

作用:

  • 脱离运行环境兼容带来的问题
  • 使用提高效率的语法、规范和标准

应用场景:

  • ECMAScript Next
  • Sass
  • 模板引擎

这些用法大都不被浏览器直接支持 自动化构建工具构建转换那些不被支持的特性

常用的自动化构建工具

  • Grunt
    • 基于磁盘读写实现,构建速度较慢
  • Gulp
    • 基于内存实现,构建速度较快
  • FIS
    • 百度推出,大而全,集成大部分常用功能

Grunt

Grunt的基本使用

Grunt标记任务失败

  • 同步任务在函数体中返回false
  • 后续所有任务不再执行
  • 运行指令加 --force,则强制执行后续任务

异步任务:

Grunt配置选项方法

Grunt多目标任务

Grunt插件的使用


Gulp

Gulp的基本使用

Gulp的组合任务

  • series:串行任务
  • parallel:并行任务

Gulp的异步任务

Gulp构建过程核心工作原理

Gulp文件操作API

Gulp案例

样式编译

脚本编译

页面模板编译

图片和字体文件转换

自动加载插件

开发服务器

useref 文件引用处理

将注释中的应用文件合并压缩为一个文件

封装工作流

  1. github创建仓库
  2. 提取gulpfile到模块
  3. 解决模块中的问题
  4. 抽象路径配置
  5. 包装gulp-cli
  6. 发布并使用模块
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改