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.后续屡次用于实战项目后可能会有增减，即不断完善之以让我的前端工做效率最大化。

使用方法

1. 请先确保已经安装Gulp(须要 Node.js 环境) ，建议采用下面的代码全局安装

   $ npm install --global gulp

2. 进入你的项目文件夹下clone 本 git 项目

   $ git clone https://github.com/Jeff2Ma/JGulp.git

   clone 后建议删除残留的.git 缓存文件夹，方便添加本身的Git 版本信息管理：

   $ rm -rf .git

3. 按照我的的项目需求，重命名JGulp 文件夹为你本身的项目英文名称，填写Project.md文件（Project.md文件在项目最终打包的时候会自动重命名为README.md保存在build 文件夹），填写package.json 文件的项目名称部分。若是须要进一步的个性化，能够编辑gulpfile.js 文件。

4. 进行相关配置（若是有须要用到相关功能）：为了安全，将重要的配置信息保存到项目目录下的一个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文件中。

5. 而后捏，就基本上能够的了，默认任务：

   $ gulp

6. 若是项目已经完成，能够经过build 命令进行项目相关文件收集，项目文件最终会聚集到项目目录下的build 文件夹中方面进一步操做

   $ gulp build

   若是须要调用Tinypng 的图片压缩，那么命令需改成：

   $ gulp build2

7. 打包build 文件夹下的项目文件，会自动生成项目别名-xxxx.zip 的文件（xxxx 为打包时候的时间）供交付使用或进行下一阶段的开发

   $ gulp zip

8. 若是要上传到远程服务器进行线上调试，能够经过该命令自动上传（需提早在 config.json作好配置 ）：

   $ gulp upload

---

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