作為一個留着邋遢發型的
老大叔，最終落水於新興的前端行業。現在的感覺：一如前端深似海，從此擼碼總不對……作為一個勵志做好前端的大叔，卻發現自己的記憶力是如此的差，比如，我已經記不清我今天早上到底有沒有穿內褲，到底有沒有吃早點……真是愧對於我這曾以為是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終於排上了用場，這個跑腿的小弟已經等得快睡着了!好的，既然他等了這么久，那么我們就開始"搞"他(你可不要想歪了)！讓這個小弟告訴妹子，去哪兒“壓”。我想注釋寫的夠多了吧……
我們告訴了她去script下面壓，但是我們現在還沒有那么地方？怎么辦？沒有條件要創造條件吖！要不然怎么能約成功呢？
創建script文件夾，順便建一個js文件！js里面隨便寫點兒什么東西。
好啦，完事具備，只差跟妹子對暗號了！想想就雞動！
現在去控制台跟妹子對暗號！
我cao，看着這呼喊聲，我特么覺得gulp比蒼老師性感多了！額，完事兒了，但是感覺好快吖！58毫秒！說好的三秒鍾真男人呢？不過，我還是想看看“壓”完后，“流”出了點兒啥？？？
就是他了……
打開看看是個啥？？壓成了一行……妹子真的是太用力了……疼……
好啦。這里笨大叔就為你演示我家的gulp妹子這一種姿勢了。其他的姿勢吖，自己慢慢回家慢慢教吧！
如果你想看更多的功能，笨大叔在這里給你一份我家gulp日常用的技能！
你可以參考一下，然后回家教導一下自己家的妹子！
不過還是友情提示吖，注意身體！畢竟身體乃是革命的本錢！
本例子下載：
https://yunpan.cn/cYaZ53DXA2MyM 訪問密碼 7027
我家gulp的安裝包下載：
https://github.com/awarriorer/myGulpConfig
js壓縮合並，圖片的壓縮，less編輯，瀏覽器同步刷新，js語法檢查等
分享過這邊小文章后，覺得自己瞬間帥的不要不要的了，不說了，我去對着鏡子看着帥帥的自己，擼一發！