NodeJs能給前端小白帶來什麼。（一）

引子的引子

第一次寫博客，本文是寫給和我同樣的小白的，大牛請謹慎食用，歡迎拍磚。

引子

隨着Node.js 4.0 的發佈，此次是nodejs和iojs合併後的第一個穩定版本。關於nodejs和iojs的那點事能夠看這個Node.js與io.js那些事兒 ,天下大勢，分久必合，合久必分。總之最後結局是好的。
Node.js是JavaScript稱霸全平臺的偉大的一步，固然對於咱們普通前端小白並不太關心JavaScript會怎麼發展，咱們只想 高高興興上班 平平安安回家，所謂老闆和我談理想，我說個人理想是不上班。因此咱們更多追求的是效率和質量。儘可能在下班前把今天的任務寫完。

前端自動化

這個標題有點大，所謂自動化就是把咱們的雙手從無心義的重複勞動解放出來，能夠幹其餘事（嘿嘿嘿）。相信入門了的前端都會有一款本身使用熟的css預處理器，若是還不知道預處理器是啥玩意？趕忙戳這裏，珍愛生命，早用早享受，這裏拿我用熟的LESS舉例。我使用LESS預編譯CSS分三個時期。

第一時期，less.js直接引入瀏覽器

<link rel="stylesheet/less" href="example.less" />
<script src="lesscss-1.4.0.min.js"></script>

嗯，而後chrome直接本地不能調試？！WTF？一查文檔

須要特別注意的是，因爲瀏覽器端使用時是使用ajax來拉取.less文件，所以直接在本機文件系統打開（即地址是file://開頭）或者是有跨域的狀況下會拉取不到.less文件，致使樣式沒法生效。

這裏有兩個解決方案，一是換瀏覽器，最新的火狐是支持跨域的。二是用webstorm打開。然而對於我並不喜歡FF，和打開時間超過30s的webstorm。最後是這個方式並不能直接部署到服務器，容易出各類錯，所以我進入了第二個時期。

第二時期，cmd編譯less文件

這裏要請出咱們的神器 Nodejs 了。這裏以windows開發平臺爲例，下載官方的msi文件，安裝。
打開界面cmd輸入

npm install -g less

很好，接下來只要cd到你的less文件夾

lessc example.less example.css

你的html裏只須要引用這個css就能夠了，很好！那麼問題又來了，根本不是我要的效果嘛。萬一你有多個less文件，咋辦？並且你改一次就得lessc一次，能把你整奔潰。好在機智（懶惰）的歪果仁早就發現這個問題了，因而進入第三個時期自動化！

第三個時期，自動化編譯less

先想一想咱們要什麼效果，嗯，最好是less文件一改，就幫我編譯，最好還能編譯合併多個文件，固然能壓縮下代碼就更nice了。固然生產環境下方便調試咱們是不會壓縮代碼的。
好，接下來請出咱們的第二款神器 gulp！

npm install --g gulp

通常說gulp咱們都會扯扯nodejs的stream，流開發，具體理論看這裏，我簡單理解爲gulp不會重複幫咱們編譯less文件沒有改變的部分，只編譯改變的部分。簡直過高大上了，嗨起來！
嗨回來咱們先來看看gulp是如何作到上面的要求的。固然咱們須要規範咱們的編程環境。

創建如圖的目錄結構

而後cd到你的目錄執行

npm init //懶得寫package.json，這裏會跳出各類填空題，按需填寫。
npm install gulp --save-dev  //這裏開始裝插件gulp，--save-dev 將存入package.json

很好已經和咱們的目標很接近了，而後在根目錄新建gulpfile.js ，這個文件是咱們自動化的主文件。把下面的代碼複製到這個文件(最好本身手打一遍加深印象)

var gulp    = require('gulp'); //
var concat  = require('gulp-concat'); //合拼文件的插件
var less = require('gulp-less'); //編譯less
var plumber = require('gulp-plumber'); //和下面這個構成less編譯報錯插件
var notify = require('gulp-notify');

gulp.task('compileLess',function(){ //task傳二個參數，第一個是這個任務的名字，第二個是執行的函數
    gulp.src("./source/less/*.less") //你的less文件放在哪裏
        .pipe(plumber(
        {errorHandler: notify.onError('Error: <%= error.message %>')}
        ))//報錯觸發
        .pipe(less())//編譯你的less文件
        .pipe(concat("base.css"))//合拼less文件並重命名爲base.css
        .pipe(gulp.dest("./build/css"))//編譯後的css文件放哪啊
})

到這裏咱們已經完成了一大部分,運行

gulp compileLess

很棒！已經能夠合拼編譯less文件而且less報錯的時候不會中斷。接下來就是自動編譯了

gulp.task('watchLess',function(){
    gulp.watch("./source/less/*.less",["compileLess"]); 
    //簡單粗暴的函數名watch，幫我盯着！第一個參數是盯着的位置，第二個是要執行的task
    //這裏的全部參數都是能夠經過數組傳值的

To be continue...