JGulp: 利用Gulp 配置的前端项目自动化工作流

商业竞争时代的Web 开发，效率越来越成为其中决胜的关键因素之一。在前几年的时候，前端是一片荒芜的待开垦之地，开发者更多考虑开阔更多技术疆域；而最近几年，在前端技术这种更新迭代快到连裸奔都追不上的情况下，在强调高产的同时，效率必然是成为争夺的制高点。

引子

在苦苦构思了上面的开头后，从“效率”这个词Jeff 引出了今天话题——也就是标题说的前端项目自动化工作流。也许你还不全懂诸如“前端自动化”“工作流（workflow）”这些名词，不急且让我列举下面的场景：

在刚刚过去的时代（恩对于很多人来说是他们正在经历的时代），小J 同学是这样开发静态网页的：接到项目，新建命名一个项目文件夹，依次新建images、css、js等文件夹分别放对应的静态文件，新建index.html 开始码HTML+CSS+JS 代码，改动一下按一下F5(或CTRL+R)刷新浏览器。项目大体快完成了，去tinypng 压缩图片，去某个在线压缩网站压缩合并CSS/JS文件，最后检查一番整理文件打包供后续开发。后来有了Github 做版本控制，后来用了Compass 写Sass 貌似快了些。不过不过，依然在完成一次项目后累成狗的同时祈祷键盘F5键没有坏掉。

前进

不得不说老外无论在哪个领域都领先我们几步，前端亦是如此。在早早就经过了那个年代后，老外发明（或者说整合）了一种前端自动化的方式，借助Node 这个新时代框架构建了一套工作流工具，目的是将上面说的压缩合并、新建、刷新等重复性工作让“机器”自动完成——工程师嘛就去干该干的事情，做爱做的事，专注编码。

那么到现在，这类工具有什么？据我浅陋的网络认知，Grunt 很流行，据说很著名的前端工具Yeoman 包含了这个Grunt 。于是在某个风平浪静的下午，我去入门Grunt，但是看到那复杂的配置我就怂了——晕追求效率的工具也不用弄那么复杂吧，作为工具本身应该是简单+其作用并举的吧？然后偶然看到一篇《Gulp的目标是取代Grunt》的檄文，看完后俺义无反顾投入了Gulp 的怀抱。在花了一个小时多了解了Gulp 并看明白配置的写法后，那个风平浪静的下午，我久久不能抑制住内心的激动。借着这激动的情绪以及对旧时代经历的种种愤懑，我捣鼓了出了属于我的Gulp——JGulp。虽然是造轮子，但依然相见恨晚。

JGulp

JGulp 是本人利用Gulp 配置的适合自己的一个前端项目自动化工作流，目前正在实践运用中（通俗说用得还挺爽）。如果你有需要，可以参考本工作量构建适合自己的工作流。

Github地址在这，跪求Star，欢迎Fork！

JGulp 包含的功能模块（插件）

小标题含义：功能（对应的Gulp 插件）

Compass（gulp-compass）

一个Sass 框架，本工作流主要是Compass + Sass，因此熟悉这两者是使用本工作流的基础条件。

Sass（gulp-sass）

Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。

本地Web 服务器功能（gulp-webserver + tiny-lr）

能够让你的当前项目目录映射到Localhost 上，本功能主要是为了添加自动刷新（livereload）功能而添加。

网页自动刷新功能（gulp-livereload）

这个功能毫无疑问是最实用的，借助本livereload 模块，一旦监控到有文件改动就自动刷新页面。需要安装相应的Chrome 扩展配合使用。

JS 文件合并（gulp-concat）

JS 文件压缩（gulp-uglify）

图片无损压缩1（gulp-imagemin + imagemin-pngquant）

经过实际使用发现，图片压缩略有损失，但基本无碍。

图片无损压缩2：Tinypng 形式（gulp-tinypng）

借用tinypng 的官方API 进行压缩，支持png、jpg 格式，后续通过 gulp build2 命令即可自动调用。因为服务器在国外原因，有时候会很慢。

文件清理功能（gulp-clean）

在项目完成可以删除一些多余的文件

任务错误中断自动重传（gulp-plumber）

好吧，“任务错误中断自动重传”是我瞎命名的。默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。

自动打包并按时间重命名（gulp-zip）

一般项目完成后需要整理文件并压缩以供交付使用或进行下一阶段的开发，本模块可以实现将项目文件自动打包并按时间重命名。

自动上传文件到远程FTP 服务器（gulp-sftp）

完成开发后，可通过本命令自动上传文件到远程FTP 服务器，以供在线调试

其他（gulp-copy、gulp-rename、opn）

其他杂项模块为该Gulp 添加文件复制、文件重命名、浏览器自动打开项目目录等基础功能

注：
1.因为CSS 代码主要是通过Compass 框架完成，所以本工作流不涉及CSS 压缩等其他功能模块（因为这些功能Compass 本身已经包含）。
2.后续多次用于实战项目后可能会有增减，即不断完善之以让个人前端工作效率最大化。

使用方法

Alt text

请先确保已经安装Gulp(需要 Node.js 环境) ，建议采用下面的代码全局安装
```
$ npm install --global gulp 
```
进入你的项目文件夹下clone 本 git 项目
```
$ git clone https://github.com/Jeff2Ma/JGulp.git
```
clone 后建议删除残留的.git 缓存文件夹，方便添加自己的Git 版本信息管理：
```
$ rm -rf .git  
```
按照个人的项目需求，重命名JGulp 文件夹为你自己的项目英文名称，填写Project.md文件（Project.md文件在项目最终打包的时候会自动重命名为README.md保存在build 文件夹），填写package.json 文件的项目名称部分。如果需要进一步的个性化，可以编辑gulpfile.js 文件。
进行相关配置（如果有需要用到相关功能）：为了安全，将重要的配置信息保存到项目目录下的一个json 文件中，名为 config.json，该文件示例代码如下：
```
{
    "project" : "Gulp",     
    "localserver" : {
        "host" : "localhost",
        "port" : "8081"
    },
    "tinypngapi": "Tinypng API KEY",
    "sftp" : {
        "host" : "8.8.8.8",
        "user" : "username",
        "port" : "22",
        "key" : "~/.ssh/sdfsfdsf",
        "remotePath" :"/"
    }
}   
```
相关内容（项目别名、本地服务器域名+端口、Tinypng API KEY、ftp相关信息）请自行配置，为保证安全，config.json文件已经添加到.gitignore文件中。
然后捏，就基本上可以的了，默认任务：
```
$ gulp
```
如果项目已经完成，可以通过build 命令进行项目相关文件收集，项目文件最终会汇集到项目目录下的build 文件夹中方面进一步操作
```
$ gulp build
```
如果需要调用Tinypng 的图片压缩，那么命令需改为：
```
$ gulp build2
```
打包build 文件夹下的项目文件，会自动生成项目别名-xxxx.zip 的文件（xxxx 为打包时候的时间）供交付使用或进行下一阶段的开发
```
$ gulp zip
```
如果要上传到远程服务器进行线上调试，可以通过该命令自动上传（需提前在 config.json做好配置）：
```
$ gulp upload 
```

原文链接：http://devework.com/jgulp.html