gulp----笨大叔的入门指南

　　作为一个留着邋遢发型的老大叔，最终落水于新兴的前端行业。现在的感觉：一如前端深似海，从此撸码总不对……作为一个励志做好前端的大叔，却发现自己的记忆力是如此的差，比如，我已经记不清我今天早上到底有没有穿内裤，到底有没有吃早点……真是愧对于我这曾以为是U盘的大脑，所以嘛，好记性不如烂博客。

　　刚开始码字，就感觉无聊至极，已经是半夜，似乎很适合做些什么！于是我进入F盘，一个节点很深的文件夹，拜访一下苍井空老师……

（三炷香后…… 别说我凶猛，大叔嘛，对自己要狠一点……）

　　如今的这个时代，对前端的要求是越来越高(感觉力不从心的举个爪！)，已经不再是原来的写个html，css,用jQuery写个轮播图的时代了。现在去面试，人家问的是什么？精通H5+CSS3？精通js?精通node?精通angular？用过哪些框架？前端自动化工具你用的啥？你写过什么比较牛逼的功能？平常用AMD模式么？对于这些……大叔我已经心有成竹，自信满满的微笑外加不屑一顾的眼神。然后轻轻跟他说，不会！不会！不会！(重要的话要说三遍……，你要招的是前端攻城狮，而不是我这样的前端农民工，还有顺便说一句，8-10K，真的找不到你这个规格的攻城狮，即使有，也是冒充的…… )

　　不过，不是什么东西都是“不会”两个字就能解决问题的。人嘛，还有要有追求的，即使我已经是大叔了，也要有些小小的追求，比如说我今天要说的前端工具，gulp妹子……

　　不会先瞅瞅，要不怎么跟人家装逼？

　　别跟我说那么多理论，我老了，我听不懂，我只想知道它能干啥？我能得到怎样一个结果？

gulp可以做什么？这个问题就先问一下自己是野生(野路子，狂野，粗暴，有蛮力没内涵)的程序猿还是正规军？如果和我一样是野生的，那么你可能需要了解些正规的前端代码应该走那些流程。高级的流程我TM也不懂，这个逼装不了……但是一般的流程还是一搜一堆堆的。

比如：1，代码的压缩与合并，图片压缩，据说做过以后访问速度会比原来嗖的一下，因为整体资源瘦了……

2，代码校验，什么？js代码有报错了？你没提前检查一下？

3，启动本地服务看看页面在浏览器里跑成了什么模样，特别是移动端的页面，写了半天，手机里效果和chrome上的效果相差的程度让大叔想哭

你想爽一下，你想免费的爽一下，那么你得先找到免费的Ta……

你有关于“爽一下”的需求，那么有些人吖，专门让你爽，来这里，下载一个叫“node”的工具，nodeJS就是gulp的家，找到nodeJS还怕找不到gulp这个妹子么？

　　nodeJS下载地址：http://nodejs.cn/，下载并且把gulp这个妹子的家，装在你的电脑上(一键傻瓜式安装就好，我不信你比我还笨o(￣ヘ￣o#))，你就可以随时让她为你服务了，是不是很兴奋？哈哈……现在笑的人，肯定比我还猥琐……

　　找到她家以后，是不是很想直接上她……？不对……是用她……？不要着急嘛，她这会儿不在家，先让管家把她召唤回来！那么问题来了，谁是管家呢？老衲很不屑的告诉你，npm.npm,npm，重要的话要说三遍！管家在不在家？那么打开你的控制台(window+R，输入cmd),在那个黑乎乎的东西是输入“node -v”,然后再次输入"npm -v",你会看到如图一样的结果，

先看看家在不在，再看看管家在不在。什么？-v 是什么意思？ -v就是这是他们第几套房……如我下面的，node是第4.3.1套房。npm是2.14.12次搬家。

　　好吧，管家在家！现在让管家呼唤她出来，洗好双手，漱漱口，准备吃她豆腐……为什么漱口？？别问我……

吃豆腐前，先得先有个容器装这块儿大豆腐，比如建个文件夹？我在F盘(住苍老师隔壁)创建了一个叫做gulp的文件夹，然后用命令行进去这个文件夹

　　偷偷的问你一个小问题：你喜欢什么主动还是被动？…………像老衲这么狂野的大叔，肯定是喜欢被动吖！所以嘛，我想要的服务我说不出口，我要给她写个清单，让她按照清单上的列表一项项为大叔服务。嗯，想想都觉得鸡动的受不了！好吧，现在准备好笔墨，在这个gulp的文件夹里，给她列一个清单！

在gulp文件夹里，新建两个文件，一个叫做package.json,gulpfile.js,

package.json，先给她制定一个技能表，我每天可能只需要她为我服务一次(哎，大叔身体不行了……)，但是她得会很多！

gulpfile.js，是自己给她安排的任务，今天我要翻牌子了…………嘿嘿嘿

　　先往package.json里面写一丢丢东西，name名称，version版本,devDependencies，她依赖的包，也就是她都会什么活儿，什么绝技……

　　好的，现在可以正式的约一下，gulp这个让我们等待了许久的妹子了……

现在进入命令行，执行命令：npm install gulp --save-dev

你会看到一坨东西，npm这个管家，已经把召唤回来了！

　　到底约没约上呢？额，看看自己的文件夹……我擦擦，果然来了！什么来了？？她在哪儿，她在哪儿？一看就是年轻人，小伙子，要淡定嘛……看，多了一个叫做node_modules的文件夹，这里面便是就是管家都有些什么东西。看看管家屋里有没有gulp？双击进去看看哇！

　　顺便看看你的菜单(package.json)里面，是否有gulp这个妹子！ok,她在！我心里踏实多了！

　　但是吖，现在gulp这个妹子是来了，但是她吖，毕竟是"第一次 "嘛，她现在啥都不会！他可不是路边贴小广告的“包小姐”，还不是轻车熟路的老司机！那怎么办？就当花瓶了？说好的为自己服务，又不能了？我的心在滴血吖！年轻人！不要慌嘛，姑娘都是你的了，你怕啥？她不会，你教她呗，告诉她你想要什么动作、什么姿势、什么服务还有什么结果，你才会觉得爽！然后就让她学习一下那个绝技，然后就“包爽 ”了！比如吖，我现在像让她给我来一个比较狂野点儿的服务！我想让她“压一下(压缩代码)！为啥要压一下？大(wo)叔(xi)不(huan)告(zai)诉(xia)你(mian)！

好吧，现在让她学习压一下的技能！首先把压一下的动作告诉她！

还是在gulp文件夹下，输入npm install gulp-uglify --save-dev,为什么用管家？因为像我这么含蓄的人，怎么会亲自教她这么"污 "的动作呢？我只享受！让管家告诉她，这个“压”的姿势叫做gulp-uglify，是“压js”的。学会了自己把她放进菜单(package.json)里！来我们看看执行的结果。

　　到菜单(package.json) 里了！

　　我已经迫不及待的想被"压 "一下了！刚开始要轻点儿，要不然会疼，要慢慢的，要循序渐进……这种fell，老衲我忍不住的YY了一发……

她现在是学会压了，但是没有声音！“压”的时候没有声音，很不爽啊有木有？对，还得让她学会说话！

npm install gulp-notify --save-dev

学会了说话，但是吖，还想让她“压”完后，"流出 "点儿什么东西！额，好吧，但是不能跟原来的一个名字吖，得区分一下！

npm install gulp-rename --save-dev

自己按照上面的方法去检查是否安装成功！不再做重复的事情了...

等等，等等，不能射！你得告诉她在哪儿“压 ”，可不能随时随地的就把妹子拉出来“压”，虽然那很刺激，但是人家可是一个矜持的人！我们还是告诉她去哪儿“压”吧！现在我们之前创建的gulpfile.js终于排上了用场，这个跑腿的小弟已经等得快睡着了!好的，既然他等了这么久，那么我们就开始"搞"他(你可不要想歪了)！让这个小弟告诉妹子，去哪儿“压”。我想注释写的够多了吧……