微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

我理想中的前端工作流

2016-07-08 21:28 前端大全

(点击上方公众号,可快速关注)

来源:littledu (@小小瘦杜)  

链接:https://segmentfault.com/a/1190000004638228


在日常的前端开发中,我们会遇到 LESS/SASS 编译、CSS 前缀自动补全 、CSS 压缩、 图片压缩、JS 合并压缩、布署发布 等各种各样的操作。通常,我们都会根据实际情况定制一个 流程 性的工具来实现所有常规的功能,这,就是我理解的 前端工作流。


CssGaga


曾经,使用过一段时间的 CssGaga,为它的强大功能而感到震憾,几乎解决了所有常见的需求。


那一段时间里,习惯了 CssGaga 拖图片即压缩上传,拖 CSS 文件即压缩+合并雪碧图上传,拖啥就做啥。也就是说,你想要做什么操作,就手动拖拉什么文件就好了。


但随着自己慢慢变胖,慢慢的越来越懒,有时候就想,为什么每次完成开发后,要手动拖几次文件,而不是一键就搞定所有必要的功能呢?


CssGaga 的模式非常值得借鉴学习,特别是它的 雪碧图合成 方式,见过很多优秀的雪碧图插件都是参照其写法,如:grunt-sprite 、gulp-tmtsprite


我理想中的工作流


一个人,想某件事,想得多了,就会有所行动,比如我曾经喜欢的妹子,现在成了我的老婆。。。。。


不好意思,扯远了,继续讲我想要的工作流模式。


结合公司的工作模式和实际业务实践,我把一个这个流程分成两个过程:开发过程 和 布署过程。


1. 开发过程


当我开始开发时,我希望是所见即所得的,我的每一次代码编辑,都能即时的响应反馈在我面前; 我用的是能提升我效率的 CSS 预处理语言,我希望她能即时的帮我编译成 CSS; 我用 rem, 但我写的是 px,我希望她能帮我转换……


我想要的 开发过程 很简单,就是能帮我提升效率!


2. 布署过程


开发完后,终于到了要发布的时候了。发布前,需要生成可以放到 生产环境 中的代码,而这个过程,要做的工作有非常多,大概有如下:


  • Less/Sass -> CSS

  • CSS Autoprefixer 前缀自动补全

  • CSS 压缩合并

  • CSS Sprite 雪碧图合成

  • Retina @2x & @3x 自动生成适配

  • imagemin 图片压缩

  • JS 合并压缩

  • EJS 模版语言


我希望这个过程是一个命令或一键就可以完成的,而不是多次拖拉生成。


我要的流程其实很简单,就是越简单越好!


下面,介绍一下因此而诞生的解决方案——tmt-workflow。


tmt-workflow


tmt-workflow 是一个基于 Gulp(v4.0)、跨平台(Mac & Win)、高效、可定制的前端工作流程。


功能特性


她除了实现了以上设想的各种功能外,还有:


  1. 基于 Gulp4 ,超好用的流程化(gulp.series, gulp.parallel)控制 API,更高的性能

  2. 跨平台的,支持 Win 和 Mac,满足各类开发者

  3. 所有项目共享一个 node_modules,只需一次 npm install 即可

  4. 可定制的,你可以根据自己的需求修改实现你自己想要的功能

  5. 自带 rem适配方案、智能 Webp 解决方案、去缓存文件 Reversion (MD5) 解决方案


快速开始


以下 2 种方式任选,请确保已安装 Node.js 环境


  • 使用 Yoeman 脚手架 generator-workflow 自动安装(推荐):

    • npm install -g generator-workflow

    • yo workflow

  • 直接下载安装:

    • 全局安装 Gulp 4,执行:npm install gulpjs/gulp#4.0 -g

    • 点击下载 tmt-workflow,进入根目录执行: npm install


注1:Gulp 4 目前 尚未正式发布,Windows 用户请先安装 git,

然后在 Git Bash 下执行 npm install 即可(非 CMD)。


注2:如遇 npm install 网络问题,推荐尝试 cnpm 安装环境依赖


工作流目录结构


tmt-workflow/

├── _tasks                  // Gulp 任务目录

│   ├── TaskBuildDev.js     // gulp build_dev

│   ├── TaskBuildDist.js    // gulp build_dist

│   ├── TaskFTP.js          // gulp ftp

│   ├── TaskZip.js          // gulp zip

│   │

│   ├── common

│   │   └── webp.js

│   │

│   ├── index.js

│   │

│   ├── lib

│   │   └── util.js

│   │

│   └── plugins               // 插件目录

│       ├── TmTIndex.js

│       └── ftp.js

├── package.json

└── project                   // 项目目录,详见下述项目结构 ↓↓↓

    ├── src

    ├── dev

    ├── dist

    └── gulpfile.js


项目目录结构


project/                          // 项目目录

├── gulpfile.js                   // Gulp 工作流配置文件

├── src                           // 源文件目录,`gulp build_dev`阶段会监听此目录下的文件变动

│   ├── css                       // 存放 Less 文件的目录,只有 style-*.less 的文件名会被编译

│   │ ├── lib-reset.less

│   │ ├── lib-mixins.less

│   │ ├── lib-rem.less

│   │ └── style-index.less        // CSS 编译出口文件

│   │ 

│   ├── html

│   ├── img                       // 存放背景图等无需合并雪碧图处理的图片

│   └── slice                     // 切片图片素材,将会进行雪碧图合并,同名 @2x 图片也会合并

│       ├── icon-dribbble.png

│       └── icon-dribbble@2x.png

├── dev                           // 开发目录,由 `gulp build_dev` 任务生成

│   ├── css

│   ├── html

│   ├── img

│   └── slice                     // 开发阶段,仅从 src/slice 拷贝至此,不做合并雪碧图处理

└── dist                          // 生产目录,由 `gulp build_dist` 任务生成

    ├── css

    ├── html

    ├── img

    └── sprite                    // 将 /src/slice 合并雪碧图,根据 /css 文件名,命名为 style-*.png 

        ├── style-index.png

        └── style-index@2x.png


配置文件 .tmtworkflowrc


.tmtworkflowrc 配置文件,位于工作流根目录,可存放配置信息或开启相关功能,

如:FTP 配置信息、开启 WebP功能,开启 REM 支持等。


{

  // FTP 发布配置

  "ftp": {

    "host": "xx.xx.xx.xx",

    "port": "8021",

    "user": "tmt",

    "pass": "password",

    "remotePath": "remotePath",         // 默认上传至根目录,此属性可指定子目录路径

    "includeHtml": true                 // FTP 上传时是否包含 .html 文件

  },

 

  // 浏览器自动刷新

  "livereload": {

     "available": true,                 // 开启

     "port": 8080,

     "startPath": "html/TmTIndex.html"  // 启动时自动打开的路径

  },

 

  // 插件功能

  // 路径相对于 tasks/plugins 目录

  "plugins": {

    "build_devAfter": ["TmTIndex"],     // build_dev 任务执行完成后,自动执行

    "build_distAfter": [],              // build_dist 任务执行完成后,自动执行

    "ftpAfter": ["ftp"]                 // ftp 任务执行完成后,自动执行

  },

 

  "lazyDir": ["../slice"],              // gulp-lazyImageCSS 启用目录

  

  "supportWebp": false,                 // 开启 WebP 解决方案

 

  "supportREM": false,                  // 开启 REM 适配方案,自动转换 px -> rem

 

  "reversion": false                    // 开启 新文件名 md5 功能

}


任务简要说明


1. 开发任务 gulp build_dev


按照目录结构创建好项目后,执行 gulp build_dev 生成开发文件位于 /dev,包含以下过程


  • 完成 ejs -> html 和 less -> css 编译

  • 自动监听文件改动,触发浏览器刷新


注:浏览器刷新功能可在 .tmtworkflowrc 中进行配置,默认开启。


2. 生产任务 gulp build_dist


开发完成后,执行 gulp build_dist 生成最终文件到 /dist 目录,包含以下过程:


  • LESS/EJS 编译

  • CSS/JS/IMG 压缩合并

  • slice 图片合并成雪碧图

  • 文件添加版本号

  • WebP 图片支持


3. FTP 部署 gulp ftp


依赖于 生产任务,执行后,会先执行 gulp build_dist ,然后将其生成的 /dist 目录上传至 .tmtworkflowrc 指定的 FTP 服务器。


4. 打包任务 gulp zip


依赖于 生产任务,执行后,会先执行 gulp build_dist ,然后将其生成的 /dist 目录压缩成 zip 格式。


注1:./src 为源文件目录,/dev 和 /dist 目录为流程自动生成的目录。

注2:FTP 和 zip 任务执行后会自动删除 /dist 目录。


使用预览


推荐配合 WebStorm 等编辑器的 Gulp 任务管理器 使用更佳。


tmt-workflow 具有良好的定制性和扩展性,用户可针对自身团队的具体需求定制,更多可查看:


Github: https://github.com/weixin/tmt-workflow

Wiki: https://github.com/weixin/tmt-workflow/wiki


最后,或许你会问:为什么叫 tmt-workflow?


TmT : 我们的组名,Tencent Moe Team。

工作流的名字随意,你也可以根据你们自己的习惯自由发挥,比如 Aoi sola、Yui Hatano、Takizawa Rola 。


【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 唯快不破:Web 应用的 13 个优化步骤 Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 50W+年薪,用友友金所招大牛啦! 也谈前端面试常见问题之「数组乱序」 用 JavaScript 构建一个3D引擎
猜您喜欢 从手机流量读懂5亿手机用户 Swift之贪婪的UIButton-应该是关于UIButton的全部了 Kotlin 1.0都出了还没看过肿么办?不怕!来看我整理的Kotlin学习资源 祝订阅此公众号的小伙伴们新春快乐 PHP7 的抽象语法树(AST)带来的变化