gulp前端构建工具讲义

在公司受邀给前端讲gulp，对于我这IOS开发来说，已经许久没有用前端的东西了，在讲之前还是做一个简单的课件准备一下，顺便拿出来分享，供大家翻阅。

什么是构建系统？

构建系统(build system)是用来从源代码生成用户可以使用的目标(targets)的自动化工具。
自动化工具。

前端有哪些构建需求？

• 预处理

  SASS LESS CoffeeScript Babel 等预处理 ECMA Script6 的兼容标准
  

• 风格与测试

  代码风格检测，单元测试
  

• 资源压缩

  CSS JS 文件合并压缩  -webkit- -moz- 前缀兼容性处理
  

• 静态资源的替换

  开发—>生产环境 需要更换URL地址以及CDN地址切换等自动化任务
  

前端那些构建工具？

• 任务管理工具 Gulp, Grunt
• 打包工具 webpack, FIS
• 构建工具 Make

Gulp和Grunt 区别是什么？

Gulp 对文件的处理采用流式读取。

Gulp 常用插件讲解

• gulp-uglify （JS压缩）
• gulp-minify-css（CSS压缩）
• gulp-minify-html（html压缩）
• gulp-jshint（JS代码检查）
• gulp-concat（文件合并）
• gulp-less（编译Less）
• gulp-sass（编译Sass）
• gulp-imagemin（压缩图片）
• gulp-livereload（自动刷新）

Gulp 文档资源地址及拓展阅读

• gulp 安装 link
• gulp 官方网站 link
• gulp 插件资源地址 link
• gulp 中文站点 link
• http://www.w3ctech.com/topic/134
• http://stackoverflow.com/questions/26719884/gulp-minify-multiple-js-files-to-one
• https://www.npmjs.com/package/gulp-minify-html
• https://www.npmjs.com/package/gulp-minify-css
• http://ju.outofmemory.cn/entry/140033
• http://www.techug.com/gulp
• http://www.gulpjs.com.cn/docs/writing-a-plugin/中文官网
• https://www.npmjs.com/package/gulp-inject-string
• https://github.com/stevelacy/gulp-git
• http://www.cnblogs.com/2050/p/4198792.html

Kommentare: