因為是連續寫的2篇隨筆，廢話不多說。直接進入正題。

選擇預編譯的工具時，筆者采用了gulp。雖然，如今市面上大多采用的多為webpack，使用gulp也是有自己的緣由的。

webpack的最主要特點是可以將項目大多數資源打包為單個Js。h5項目中，打包後可以減少文件的請求數量，而小程序是由微信側控制，並且依賴目錄結構的項目，webpack只能進行配置，分入口打包，最終生成的目錄結構還是必須符合小程序的項目結構。

gulp同樣可以達到預編譯的需求，而且配置相對簡單。所以就采用了gulp。

大部分的配置需求，都可以百度到。這裏就挑一點關鍵點做一下討論吧。

1. 背景圖的 base64 轉換。這個問題可以使用gulp-base64插件，簡單處理掉。但是，背景圖和正常使用的 image 圖片在相同文件夾下，會同樣被打包到dist 目錄中。造成冗余，我采用的處理方法是，將背景圖和 image 使用的本地圖片分開存放，打包時，排除掉背景圖的文件夾，僅被打包成base64 存入wxss文件。 all.concat([‘!src/assets/bgImages/**‘])
2. 實時編譯。可能大家第一印象，感覺簡單的使用 gulp.watch 直接跑一次相應的任務就好了。但是，簡單的這樣配置會造成一個性能的問題。每個改動，編譯大量文件。每個文件被修改都會觸發小程序開發者工具的刷新。就會造成每次保存，都要等很久才會編譯成功，看到頁面效果。大大的減低編程效率。所以，在 gulp.watch 任務的中，加入了一個回調。

   function watchHandle (cb) {
     return e => {
       const newPath = changePath(e.path)
       if (e.type === ‘deleted‘) {
         let distFile 
    
   = ‘./dist/‘ + Path.relative(‘./src‘, newPath);
         fs.existsSync(distFile) && fs.unlinkSync(distFile)
       } else {
         cb(newPath)()
       }
       console.log(‘File ‘ + e.path + ‘ was ‘ + e.type + ‘, running tasks...‘)
     }
   }
   
    gulp.watch(jsList, watchHandle(js))

   View Code

   watchHandle ，就是接收到修改過的文件，然後將文件傳入回調，進行處理的中間方法。
   其中，js 是針對 js 文件的預編譯處理的回調方法。之後再討論。
3. 依照 process.env.NODE_ENV 做不同的配置。例如，開發與生產環境的域名請求。跳轉到其他小程序的對應版本。
   采用的方法是，增加 config 目錄，存放多個環境的配置文件。在打包時，依照 env 將對應的文件打包到 dist 目錄下，並改為 index.js。再app.js 中直接引用，就可以直接取到對應環境的配置。

目前，感覺值得一提的也就只有上面3點。如之前所說，大部分的預編譯配置，都是可以百度、谷歌找到，也比我來講述的更加細致、全面。

完整的包，目前準備在隨筆整理完之後，處理掉公司相關的內容，再上傳到github開源。如果有需要，可能提前傳部分配置。還是要先看各位看官的需要吧。

至於下一篇，就有空的時候再來發吧。應該會寫按鈕的封裝，因為，路由有點問題還在解決中，完成了再來討論與開源。

下次再見。。

spa 小程序的研發隨筆 (2) --- 預編譯