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

liuchengxu 發布于2019-08-28 18:26 / 3473人閱讀

摘要：引子的引子第一次寫博客，本文是寫給和我一樣的小白的，大牛請謹慎食用，歡迎拍磚。是稱霸全平臺的偉大的一步，當然對于我們普通前端小白并不太關心會怎么發展，我們只想高高興興上班平平安安回家，所謂老板和我談理想，我說我的理想是不上班。

引子的引子

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

引子

隨著Node.js 4.0 的發布，這次是nodejs和iojs合并后的第一個穩定版本。關于nodejs和iojs的那點事可以看這個Node.js與io.js那些事兒 ,天下大勢，分久必合，合久必分。總之最后結局是好的。
Node.js是JavaScript稱霸全平臺的偉大的一步，當然對于我們普通前端小白并不太關心JavaScript會怎么發展，我們只想 高高興興上班平平安安回家，所謂老板和我談理想，我說我的理想是不上班。所以我們更多追求的是效率和質量。盡量在下班前把今天的任務寫完。

前端自動化

這個標題有點大，所謂自動化就是把我們的雙手從無意義的重復勞動解放出來，可以干其他事（嘿嘿嘿）。相信入門了的前端都會有一款自己使用熟的css預處理器，如果還不知道預處理器是啥玩意？趕緊戳這里，珍愛生命，早用早享受，這里拿我用熟的LESS舉例。我使用LESS預編譯CSS分三個時期。

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

嗯，然后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...

云服務器 GPU云服務器數據統計帶來什么物聯網將帶來什么什么加速器能給網頁加速能給

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111227.html

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

摘要：引子的引子第一次寫博客，本文是寫給和我一樣的小白的，大牛請謹慎食用，歡迎拍磚。是稱霸全平臺的偉大的一步，當然對于我們普通前端小白并不太關心會怎么發展，我們只想高高興興上班平平安安回家，所謂老板和我談理想，我說我的理想是不上班。引子的引子第一次寫博客，本文是寫給和我一樣的小白的，大牛請謹慎食用，歡迎拍磚。引子隨著Node.js 4.0 的發布，這次是nodejs和iojs合并后的...

Binguner 2019-08-19 17:08 評論0 收藏0
（小白指南）在 Linux 服務器上安裝 Nodejs、Nginx 以及部署 Web 應用

摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問服務器的兩個問題寫出來，是因為作者在排查問題的時候，發現在服務器直接訪問的頁面，能很好地檢查排除問題在百度尋找問題答案的時候，發現這種做法也得到了不少人的肯定。前段時間要把項目部署到服務器，期間踩了不少的坑。故寫下這篇文章，從零開始把自己部署的過程都記錄下來，希望能給其他像我一樣的小白一點幫助。如果有疏漏的地方，請各位客官指出，...

glumes 2019-07-25 14:06 評論0 收藏0
淺談前后端分離與實踐之 nodejs 中間層服務（二）

摘要：服務端任需要進行校驗來達到數據的可靠性前端的路由可能在服務端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請求時間。關于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實踐微信公眾號會不定期推送前端技術文章，歡迎關注一、背景書接上文，淺談前后端分離與實踐(一) 我們用mock服務器搭建起來了自己的前端數據模擬服務，前后端開發過程中只需定義好接口規范，便可以相互進行各自的開發...

ddongjian0000 2019-08-21 17:13 評論0 收藏0