npm 的筆記

由「用 node 架一個迷你靜態伺服器」、「npm 超級簡短文」、「久違的自動化」合併。

之前的網頁都直接在目錄中點擊 HTML 檔案。這個樣子的網址列，會以 file:// 為開頭。雖然在自家電腦的版面配置上，這樣已經頗足夠了──但──

• 如果要在其他電腦上檢查網頁呢？
• 如果想模擬網站又不想用 XAMPP 呢？
• 如果想要在目錄間不斷切換呢？
• 「為什麼會我網頁的某些圖片不見了？」
• …………

為什麼不用 node.js 做個超簡單的伺服器呢？

於是我就開始裝了。其實不難：

1. 先去 node.js 官網下載並安裝 node.js。安裝好以後，應該能用上兩個指令：node 與 npm。
2. 打開作業系統的終端機（例如 WIndows7 以後的就選 Powershell）然後鍵入這個指令：npm install http-server -g
3. 成功的話應該會開始下載、安裝必要的程式。
   另外解釋一下各個指令的含意：
   1. npm 是管理各個小套件的程式。
   2. install 可以幫你安裝在 npm 網站的套件。
   3. http-server 是這篇文章的主角：http-server 套件。
   4. -g 可以讓 http-server 這個套件，在這台電腦的任何目錄運行。這樣想測試其他網頁的目錄，就可以直接關機後在目錄切換，而不需要每個目錄都安裝。
4. 裝好以後，把終端機的目錄轉換到想測試的網頁目錄所在（如果在 WIndows7 想偷懶，可以在該目錄的目錄列上鍵入 powershell）
5. 開啟終端機以後，鍵入 http-server 指令。看到 Starting up http-server, serving ./ 之類的字眼以後，一個迷你的伺服器就開始在運作了。
6. 你可以在本機用任何 Available on: 下面的 IP 網址連結。
7. 若要在其他電腦上檢查你的網頁，最好還是先用 ipconfig 檢查一下位置。另外，防火牆記得開啟 8080 port，不然會被擋住。（想要偷懶的話也可以直接關掉，但盡量不要這麼做）
8. 想關掉 http-server，請按 Ctrl 與 C。

接下來我會試著尋找、安裝、並探索 SASS 套件，這樣就可以在本機寫好 SASS 後直接編譯了。

再之後，也許可以用測試套件自動化這一切？

先從建立空白資料夾開始說吧：你想要開啟專案，可以下 npm init 指令開始，然後按照指示完成基本資料。接著，在 package.json 的 devDependencies 裡面增加所需要的套件：例如說我裝了 http-server 與 node-sass 的話，就鍵入 npm install 開始安裝這兩個套件。完成以後，就可以用了。

SASS 編譯方法不難：想把 sass 目錄的 foo.scss 編譯到 public 目錄下，變成 bar.css 的話，輸入 node-sass sass/foo.scss public/bar.css 就好。

但是，如果想執行的話，就要從 node_modules 下面的套件找 bin 執行。這樣很麻煩呢，有沒有簡單的辦法？
有。請在 package.json 的 scripts 裡撰寫指令。
指令當然可以直接寫，但這樣總有一天會造成麻煩。所以，試著參考下各套件的指令，接著把對應的指令寫進 bin 目錄裡面吧。

Watch & Compile your Sass with npm 這文章還不錯的，好入門。

另外還有些雜七雜八的紀錄：

1. 為什麼想執行程式，得從 node_modules 下面的套件找 bin 執行？

   Did you install the package globally (npm install -g node-sass) or locally? If locally, the CLI tool can be called as ./node_modules/.bin/node-sass.

2. 如何更新 node？

3. 寫好的檔案無法執行？把 bin 檔裡面的權限設定好了嗎？要可執行（exectueable）才行。

4. 想得到壓縮版的 CSS？ --output-style compressed

暫時先寫這樣。接下來，會想試試如何用 browserSync、還有該用什麼自動化指令，讓我存檔後立刻重整頁面，而不用一直打 npm run。參考資料。

唔，好累。好想睡覺……

前面說好的 npm 自動化，因為一直找不到入門點，所以學起來其實很不順利。直到看了 MDN 的文章，才發現了希望。

MDN 示範的自動化工具稱作 gulp。用 npm install --global gulp-cli 與 npm install --save-dev gulp 安裝 gulp 以後，這個專案就有自動化的功能了--但你必須在根目錄的 gulpfile.js 先設定好。

我們直接給個程式碼吧：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var gulpSass    = require('gulp-sass');

gulp.task('browser-sync', function()
{
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
});

gulp.task('sass', function()
{
    return gulp.src("src/scss/*.scss")
        .pipe(gulpSass({
            outputStyle: 'compressed'
        }))
        .pipe(gulp.dest("public/css"))
        .pipe(browserSync.stream());
});

gulp.task('watch', function ()
{
    gulp.watch("src/scss/*.scss", ['sass']);
    gulp.watch("public/*/*").on('change', browserSync.reload);
    gulp.watch("public/*").on('change', browserSync.reload);
});

gulp.task('default',['browser-sync','watch']);

最上面的 require 就是這個程式要引用的軟體。這裡用了 gulp、browser-sync、gulp-sass 這三個。針對不同的軟體，要寫不同的指令，以做出對應的動作：BrowserSync 是個能自動重整、模擬網站的工具。
在這裡，我們指定了 BrowserSync 要測試的目錄，它位於 ./public 裡面。
sass 呢，就叫它把 src/scss 的 SCSS 檔案變成 CSS 檔案，並放到 public/css 目錄。

watch 會自動檢查指定的檔案有沒有變更。變更的話就會：

• 檢查 src/scss 的 SCSS 檔有沒有變更。有的話，執行 ['sass'] 任務。
• 檢查 public 目錄裡面的檔案有沒有變更。有的話，叫 browserSync 重新整理。

那麼，下一步呢？告訴你，我們最後可以用 gulp 指令就能完成一切。

可是如何完成？

看到最下面的 gulp.task('default',['browser-sync','watch']); 了嗎？gulp.task('default'); 是 gulp 的預設指令。如果只有輸入 gulp 而沒輸入其他任務以執行之，gulp 就會執行 default。而在 default 裡面，我們安插了兩個任務：browser-sync 與 watch。這樣，gulp 預設就會執行 browser-sync 與 watch。而 watch 會執行 sass，使我們可以完成：存檔後立刻重整頁面、還有把 SCSS 檔案編譯成 CSS 後複製到 public 目錄。

就這樣，只要開啟命令列並移動到專案目錄後輸入 gulp，自動化工作開始了。可喜可賀可喜可賀。

改天把作品傳上來？

註：require() 並不是 JavaScript 的語法。require() 指令使用的是 Node.js 的模組。

參考資料

• Gitbook
• MDN
• BrowserSync