search

xiao-hai / blog

Xiaohai's blog.
MIT License
5 stars 1 forks source link

前端自动化——快速的移动Web开发模式(Yeoman: generator-gulp-webapp) #1

Open xiao-hai opened 9 years ago

xiao-hai commented 9 years ago

解决痛点：

1 ) 创建工程很苦(哔)

"yo webapp” 一键搞定。

2 ) 兼容性测试繁琐

无刷新同步测试爽。

3 ) 开发环境依赖工具多：Apache、Koala

"gulp serve”，别无他求。

4 ) 前端优化纯手工操作

自动处理文件压缩/合并、图片压缩、文件依赖及包管理，图片合并(Css Sprite)半自动化（注：px单位转rem可以实现，但是background-size计算需要知道sprite图片尺寸，暂时没有解决）。

一. 安装

Yeoman: http://yeoman.io/ Yeoman: yo + bower + gulp (grunt)

脚手架生成器： http://yeoman.io/generators/ gulp-webapp: https://github.com/yeoman/generator-gulp-webapp

安装环境：npm install -g yo bower gulp 安装生成器: npm install -g generator-gulp-webapp（当前版本：1.0.3）

二. 使用

脚手架内容：

  1. /app 整个项目的源文件
  2. /bower_components Bower组件目录
  3. /node_modules node插件目录
  4. /test 自动化测试目录
  5. .bowerrc Bower配置文件（项目路径等）
  6. .editorconfig 跨编辑器的代码风格配置文件
  7. .gitattributes GIT配置文件
  8. .gitignore GIT忽略文件清单
  9. .yo-rc.json 存储生成器的配置信息
  10. bower.json Bower配置文件（模块依赖）
  11. gulpfile.babel.js Gulp配置文件
  12. package.json 项目配置文件

    包含插件：

  13. babel-core A compiler for writing next generation JavaScript ES2015编译器
  14. browser-sync Live CSS Reload & Browser Syncing 文件改变后自动刷新浏览器，且跨浏览器/设备同步操作行为
  15. del Delete files/folders using globs 利用通配符删除文件/文件夹（它还可以保护你的当前工作目录及上层目录不被删除）。
  16. wireDep Wire Bower dependencies to your source code. 将bower依赖模块写入文件
  17. opn A better node-open. Opens stuff like websites, files, executables. Cross-platform. 一款可打开网页/图片文件的插件
  18. main-bower-files Get main files from your installed bower packages. 把bower.json依赖的每个库里的main属性组合起来创建gulp.src()
  19. gulp The streaming build system gulp流式构建系统
  20. gulp-load-plugins Automatically load any gulp plugins in your package.json 一次载入package.json中的所有插件
  21. gulp-sourcemaps（sourcemaps会被gulp-minify-css干掉，暂且弃用） Source map support for Gulp.js 源（程序）映像（部分插件支持）
  22. gulp-autoprefixer Prefix CSS CSS前缀自动补全
  23. gulp-cache（使用此插件导致gulp-imagemin无效，弃用） A cache proxy plugin for Gulp 变动监听，只有文件变化了才再次触发任务
  24. gulp-eslint（暂无要求，弃用） A gulp plugin for processing files with eslint JS语法校验
  25. gulp-if Conditionally run a task 一个支持If条件判断的插件（部分插件可能会因此报错）
  26. gulp-imagemin（压缩效果非常渣，弃用） Minify PNG, JPEG, GIF and SVG images 图片压缩
  27. gulp-minify-css Minify css with clean-css. CSS压缩
  28. gulp-minify-html Minify html with minimize. HTML压缩
  29. gulp-uglify Minify files with UglifyJS. JS压缩（丑化）
  30. gulp-size Display the size of your project 显示文件大小
  31. gulp-useref Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets. CSS/JS文件合并

    三. 扩展

  32. gulp-less Less for Gulp less编译
  33. gulp.spritesmith Convert a set of images into a spritesheet and CSS variables via gulp 图片拼合，并生成对应CSS
  34. merge-stream Create a stream that emits events from multiple other streams 同时输出多个流
  35. gulp-replace A string replace plugin for gulp 字符串替换
  36. gulp-include Makes inclusion of files a breeze. Enables functionality similar to that of snockets / sprockets or other file insertion compilation tools. 通过include标签引入文件，功能与SSI include相同
  37. gulp-imageisux 图片压缩方案之一 智图（http://zhitu.isux.us/）的gulp插件 优点： 可生成webP格式图片。 缺点：源目录文件夹层级无法保留，各文件夹中的图片压缩完都输出到path目录下(由imageisux函数第一个参数指定)；输出路径不能自由指定；不支持管道流，无法保证图片先压缩后拷贝的执行顺序。
  38. gulp-tinypng 图片压缩方案之二 tinypng（https://tinypng.com/）的gulp插件 优点：压缩效果好，支持管道流。 缺点：收费，免费版只支持压缩图片500张/月；（https://tinypng.com/developers 需申请APP_Key）； 源目录文件夹层级无法保留，需要手动管理。 推荐使用此方案。
  39. gulp-plumber Prevent pipe breaking caused by errors from gulp plugins 错误处理插件，主要防止监听过程中由于任务报错造成进程中断

    四. 延伸

  40. 考虑用Sass替换Less
  41. 当前没有考虑使用模块加载器的情况
  42. 发布自己的generator和bower package
  43. 前后端配合
  44. 解决文件缓存问题(gulp-md5-plus)
  45. 调研browserSync能否代替Apache实现接口访问
  46. 图片拼合全自动化，具体由px单位配合css scale实现，需要考虑设备dpr，后续有时间继续研究

    如何学习gulp：

  47. 浏览gulp插件库，了解利用已有插件都可以做哪些事情；
  48. 仔细阅读插件文档，以便发挥出它们最大的功效；
  49. 学习gulp自身API;
  50. 尝试编写适合自己工作流程和习惯的插件，并发布出来分享给大家。

    参考链接：

[http://www.imooc.com/learn/30 Grunt-beginner](http://www.imooc.com/learn/30 Grunt-beginner) 前端自动化工具 http://ju.outofmemory.cn/entry/104488 【译】EditorConfig介绍 http://www.cnblogs.com/Wayou/p/es6_new_features.html ES6新特性概览 http://www.jianshu.com/p/b3c15f304227 compass生成基于rem的图片精灵 https://github.com/ericdum/mujiang.info/issues/6/ package.json中文文档 http://www.browsersync.cn/docs/options/ Browsersync options (选项配置)

相关代码：/yeoman_gulp-webapp

sumaolin commented 8 years ago
  1. 调研browserSync能否代替Apache实现接口访问 参考链接：http://stackoverflow.com/questions/25410284/gulp-browser-sync-redirect-api-request-via-proxy 使用 http-proxy-middleware 模块可以实现