摘要：引子的引子第一次寫(xiě)博客，本文是寫(xiě)給和我一樣的小白的，大牛請(qǐng)謹(jǐn)慎食用，歡迎拍磚。是稱霸全平臺(tái)的偉大的一步，當(dāng)然對(duì)于我們普通前端小白并不太關(guān)心會(huì)怎么發(fā)展，我們只想高高興興上班平平安安回家，所謂老板和我談理想，我說(shuō)我的理想是不上班。

第一次寫(xiě)博客，本文是寫(xiě)給和我一樣的小白的，大牛請(qǐng)謹(jǐn)慎食用，歡迎拍磚。

隨著Node.js 4.0 的發(fā)布，這次是nodejs和iojs合并后的第一個(gè)穩(wěn)定版本。關(guān)于nodejs和iojs的那點(diǎn)事可以看這個(gè)Node.js與io.js那些事兒 ,天下大勢(shì)，分久必合，合久必分。總之最后結(jié)局是好的。
Node.js是JavaScript稱霸全平臺(tái)的偉大的一步，當(dāng)然對(duì)于我們普通前端小白并不太關(guān)心JavaScript會(huì)怎么發(fā)展，我們只想 高高興興上班 平平安安回家，所謂老板和我談理想，我說(shuō)我的理想是不上班。所以我們更多追求的是效率和質(zhì)量。盡量在下班前把今天的任務(wù)寫(xiě)完。

這個(gè)標(biāo)題有點(diǎn)大，所謂自動(dòng)化就是把我們的雙手從無(wú)意義的重復(fù)勞動(dòng)解放出來(lái)，可以干其他事（嘿嘿嘿）。相信入門(mén)了的前端都會(huì)有一款自己使用熟的css預(yù)處理器，如果還不知道預(yù)處理器是啥玩意？趕緊戳這里，珍愛(ài)生命，早用早享受，這里拿我用熟的LESS舉例。我使用LESS預(yù)編譯CSS分三個(gè)時(shí)期。

嗯，然后chrome直接本地不能調(diào)試？！WTF？一查文檔

需要特別注意的是，由于瀏覽器端使用時(shí)是使用ajax來(lái)拉取.less文件，因此直接在本機(jī)文件系統(tǒng)打開(kāi)（即地址是file://開(kāi)頭）或者是有跨域的情況下會(huì)拉取不到.less文件，導(dǎo)致樣式無(wú)法生效。

這里有兩個(gè)解決方案，一是換瀏覽器，最新的火狐是支持跨域的。二是用webstorm打開(kāi)。然而對(duì)于我并不喜歡FF，和打開(kāi)時(shí)間超過(guò)30s的webstorm。最后是這個(gè)方式并不能直接部署到服務(wù)器，容易出各種錯(cuò)，因此我進(jìn)入了第二個(gè)時(shí)期。

這里要請(qǐng)出我們的神器 Nodejs 了。這里以windows開(kāi)發(fā)平臺(tái)為例，下載官方的msi文件，安裝。
打開(kāi)界面cmd輸入

npm install -g less

很好，接下來(lái)只要cd到你的less文件夾

lessc example.less example.css

你的html里只需要引用這個(gè)css就可以了，很好！那么問(wèn)題又來(lái)了，根本不是我要的效果嘛。萬(wàn)一你有多個(gè)less文件，咋辦？而且你改一次就得lessc一次，能把你整奔潰。好在機(jī)智（懶惰）的歪果仁早就發(fā)現(xiàn)這個(gè)問(wèn)題了，于是進(jìn)入第三個(gè)時(shí)期自動(dòng)化！

先想想我們要什么效果，嗯，最好是less文件一改，就幫我編譯，最好還能編譯合并多個(gè)文件，當(dāng)然能壓縮下代碼就更nice了。當(dāng)然生產(chǎn)環(huán)境下方便調(diào)試我們是不會(huì)壓縮代碼的。
好，接下來(lái)請(qǐng)出我們的第二款神器 gulp！

npm install --g gulp

一般說(shuō)gulp我們都會(huì)扯扯nodejs的stream，流開(kāi)發(fā)，具體理論看這里，我簡(jiǎn)單理解為gulp不會(huì)重復(fù)幫我們編譯less文件沒(méi)有改變的部分，只編譯改變的部分。簡(jiǎn)直太高大上了，嗨起來(lái)！
嗨回來(lái)我們先來(lái)看看gulp是如何做到上面的要求的。當(dāng)然我們需要規(guī)范我們的編程環(huán)境。

建立如圖的目錄結(jié)構(gòu)

然后cd到你的目錄執(zhí)行

npm init //懶得寫(xiě)package.json，這里會(huì)跳出各種填空題，按需填寫(xiě)。
npm install gulp --save-dev  //這里開(kāi)始裝插件gulp，--save-dev 將存入package.json

很好已經(jīng)和我們的目標(biāo)很接近了，然后在根目錄新建gulpfile.js ，這個(gè)文件是我們自動(dòng)化的主文件。把下面的代碼復(fù)制到這個(gè)文件(最好自己手打一遍加深印象)

var gulp    = require("gulp"); //
var concat  = require("gulp-concat"); //合拼文件的插件
var less = require("gulp-less"); //編譯less
var plumber = require("gulp-plumber"); //和下面這個(gè)構(gòu)成less編譯報(bào)錯(cuò)插件
var notify = require("gulp-notify");

gulp.task("compileLess",function(){ //task傳二個(gè)參數(shù)，第一個(gè)是這個(gè)任務(wù)的名字，第二個(gè)是執(zhí)行的函數(shù)
    gulp.src("./source/less/*.less") //你的less文件放在哪里
        .pipe(plumber(
        {errorHandler: notify.onError("Error: <%= error.message %>")}
        ))//報(bào)錯(cuò)觸發(fā)
        .pipe(less())//編譯你的less文件
        .pipe(concat("base.css"))//合拼less文件并重命名為base.css
        .pipe(gulp.dest("./build/css"))//編譯后的css文件放哪啊
})

到這里我們已經(jīng)完成了一大部分,運(yùn)行

gulp compileLess 

很棒！已經(jīng)可以合拼編譯less文件并且less報(bào)錯(cuò)的時(shí)候不會(huì)中斷。接下來(lái)就是自動(dòng)編譯了

gulp.task("watchLess",function(){
    gulp.watch("./source/less/*.less",["compileLess"]); 
    //簡(jiǎn)單粗暴的函數(shù)名watch，幫我盯著！第一個(gè)參數(shù)是盯著的位置，第二個(gè)是要執(zhí)行的task
    //這里的所有參數(shù)都是可以通過(guò)數(shù)組傳值的