一塊兒來構建前端工具鏈吧~（開發項目）

       繼續上篇介紹的 nuts 的內容，在咱們經過 create 命令以後，就可使用 dev 命令去進行項目的開發了~那麼這個 dev 命令究竟都執行了哪些功能呢？

      首先，咱們須要將咱們的源代碼進行預編譯不管是從ES6到ES5，仍是從scss到css，咱們最終的目標代碼都是和源代碼不同的，那麼咱們在啓動項目以後就須要將這些目標代碼和源代碼分開來，因此在 dev 命令之中咱們主要作的就是兩件事，一個是預編譯咱們的代碼到正確的路徑上，另外一個就是對開發環境正確性的檢查，其實對於預編譯的部分咱們並無作什麼特別的處理，都是基本的轉換和編譯，更多的代碼都是在檢測目錄是否存在或者靜態服務器是否正常啓動之類的邏輯處理，對於源代碼的處理上，我這裏就僅僅只舉一個小栗子來講明一下大體的邏輯，其餘的文件基本都是如此處理了。

/**
 * 對項目中的scss文件進行編譯
 * @param input
 * @param output
 */
function compassSass(input, output) {
    controller.packages._core.src(input)
        .pipe(controller.packages._plumber())
        .pipe(controller.packages._compass({
            includePaths: controller.config.sassLib
        }))
        .pipe(controller.packages._connect.reload())
        .pipe(controller.packages._core.dest(output));
}

       咱們經過一個個這樣的命令，經過傳入輸入輸出目錄來將代碼進行預編譯，並經過第三方或者本身的配置去作特殊的處理，例如上面代碼中的compass任務，引入的就是我本身的scss庫，原本以前是使用 compass 的，可是在代碼遷移到全node的環境後，爲了去除ruby的依賴，compass一樣也面臨着被替換，所以本身根據平日的需求寫了一個運行在node上的scss庫，這樣就能夠再也不安裝ruby了。接下來演示的就是關於靜態服務器的部分了，在這裏我採用的是 gulp-connect，本來打算本身寫一個的，可是發如今處理自動刷新的時候只能經過node的watch方法進行文件變更的監控，感受效率上太差了，因此暫時放棄，就使用了更加優秀的庫來代替，固然了，之後有時間我會再嘗試嘗試的~反正如今這個結構替換起來仍是至關容易的~

      在這個任務中，首先先檢查命令行中傳入的端口號和項目路徑是否合法，路徑好說，那麼端口又如何檢測合法性呢？我在這裏的思路是經過node中的net模塊去先啓動這個端口號，經過監聽的結果來判斷當前端口是否被佔用，若是佔用就返回false，若是沒有被佔用，那麼就先關閉本身，釋放端口後返回true，這樣在回調函數中就能夠判斷是否能夠啓動服務器，同時，在這裏我還作了兩個功能點，一個是在命令行中打印出當前本機的IP地址和端口號，這樣咱們就能夠方便的複製連接到瀏覽器中打開頁面。那麼如何取得當前本機的IP地址呢？

       在 util 目錄下的get_ip_address文件中，咱們 os 模塊中的網絡接口來拿到整個網絡對象，而後循環遍歷出IPv4對象下的地址，感興趣的同窗能夠看看這個模塊下返回的內容~

 

 

      隨後在獲得IP地址後拼接出完整的 http 請求後我又在想，若是我須要在移動端上打開頁面該怎麼辦呢？難道要在手機上輸入這麼長的連接？若是能在手機上一鍵打開就行了，能夠如今我總不能本身再寫一個程序安裝在手機上吧。。。後來想到如今的手機都有了掃描二維碼的功能，若是我在命令行上顯示連接的二維碼，那我拿手機掃描一下不就行了嘛~因而我搜索了一遍 npm，找到了這個庫 qrcode-terminal，它能夠接收一段字符串，並經過二維碼的形式顯示在命令行上，效果以下所示：

      這樣之後在手機上開發頁面的時候就能夠掃一掃啦~固然如今還有一個功能還在構想中，若是在我執行命令的時候能自動啓動瀏覽器就行了，接下來再完善這裏的功能吧~

 

 

 

 

 

 

       最後在開發完成項目以後提交代碼前咱們須要將開發過程當中的過程文件都刪除掉咯，接下來咱們只須要執行 clean 命令就可讓nuts去自動刪除咱們產生的垃圾文件了，而且在clean任務中我會過濾掉中文名稱的文件，畢竟咱們的路徑最好仍是使用英文比較合適啦，中文文件名總顯得那麼不三不四的。那剩下還有兩個命令 include 和 build，build 命令很好理解，是最終上線時進行編譯的命令，在這個命令中咱們須要作版本管理和CDN路徑的處理了，那 include 命令呢？在下一篇中我會介紹如何使用node來生成文件去控制靜態資源的引入~(￣︶￣)↗