jus 是一個開發伺服器和建構工具，用於製作靜態網站，無需設定且無需樣板程式碼。它內建支援 browserify、使用 Babel 的 ES6 和 ES2015、React JSX、GitHub Flavored Markdown、語法高亮、Sass、Less、Stylus、Myth、Handlebars、browsersync 等等。
現在是 2016 年，您正在建構一個新的網站。一開始，您只建立一個包含一些內聯腳本和樣式標籤的 HTML 檔案。這在一段時間內有效，但很快您的程式碼就會增加，而您決定將樣式和腳本提取到獨立的檔案中。這樣稍微好一點，但最終您想要做更複雜的事情，例如用 Sass 編寫樣式表，或連接和縮小資源，或使用 browserify 的 npm 相依性。這些便利性對於建構任何規模的網站都至關重要，但是設定它們既繁瑣又耗時。在專案的這一點上，您的注意力從創意轉向了平凡。現在您不是在建構，而是在設定。
在當今時代，大多數開發人員會轉向 Gulp、npm 腳本、Jekyll 或 數十個靜態網站工具之一。這就是 jus 作為替代方案出現的地方。
jus 沒有設定。它只有兩個命令：serve 和 build。在您的專案目錄中執行 jus serve，您就有一個正在運行的即時開發伺服器，監視檔案變更，使用 browsersync 自動重新整理您的瀏覽器，並使用乾淨 URL 提供您的內容。編寫一個 foo.sass 檔案，它將在 /foo.css 提供服務。在您的腳本中使用 npm 樣式的 require 語句，jus 會將其作為 browserified 套件提供。編寫 React 的 JSX 語法，它將即時轉換為 javascript。編寫一個 GitHub 風格的 /markdown/file.md，它將作為語法高亮顯示的 HTML 在 /markdown/file 提供服務。
當需要部署時，執行 jus build 將您的網站編譯成純 HTML、CSS 和 Javascript 檔案，準備部署到 GitHub Pages、Surge 或任何其他支援乾淨 URL 的靜態網站主機。
jus 需要 node 4 或更高版本，因為它使用了一些較新的 Javascript 功能。全域安裝命令行介面，然後執行它以查看使用說明
npm i -g jus && jus
jus 有很多相依性，因此安裝需要一些時間。也許去喝杯 :coffee: 並閱讀 如何使 npm 更快。
如果您喜歡透過範例學習，請查看使用 jus 的網站的儲存庫。否則，請繼續閱讀...
頁面以 Markdown、HTML、Handlebars 或它們的任意組合編寫。在呈現時，每個頁面都會傳遞一個 Handlebars 上下文物件，其中包含目錄中所有檔案的中繼資料。
H1、H2 等) 會自動轉換為錨定超連結。副檔名：html|hbs|handlebars|markdown|md
您專案中的所有 javascript 檔案都會自動使用 es2015 和 react 預設值進行 browserified 和 babelified。
您可以使用 node 樣式的 require 語句將 node 和 npm 模組包含在您的程式碼中
const url = require('url').parse('https://example.com')
console.log(`the domain is ${url.host}`)
如果您願意，也可以使用 ES6 樣式的匯入
import React from 'react'
import ReactDOM from 'react-dom'
import domready from 'domready'
domready(() => {
// do some React magic
})
腳本使用 babel-preset-react 進行 browserified，因此您可以在腳本中編寫 JSX。
副檔名：js|jsx|es|es6
樣式表可以用 Sass、SCSS、Less、Stylus、Myth 或純 CSS 編寫。使用任何適合您的預處理器。
副檔名：css|less|sass|scss|styl
當初始化 jus 伺服器時，它會遞迴查找目錄樹中的所有檔案，忽略 node_modules、.git 和其他不需要的模式。然後，這些檔案會以陣列形式儲存在記憶體中，稱為 files。為了方便起見，此檔案列表會按類型分為較小的陣列：pages 的陣列、scripts 的另一個陣列等等。
{
files: [...],
pages: [...]
scripts: [...]
stylesheets: [...]
images: [...]
datafiles: [...]
}
當您請求一個頁面時，伺服器會即時呈現該頁面，並將此物件傳遞到指定頁面的範本。這表示每個頁面都可以在呈現時存取網站中每個檔案的中繼資料。
在您的頁面中使用 handlebars 是完全可選的。如果您的頁面不需要在建構時進行任何動態呈現，這也沒關係。上下文將在呈現時被忽略。
jus 支援 HTML frontmatter。這允許您將鍵值中繼資料新增至您的頁面
<!--
title: Alice in Wonderland
year: 1951
-->
頁面頂端的 HTML 註解中存在的任何此類值都可在該頁面的Handlebars 上下文物件 中於呈現時使用。
注意：Jekyll 使用 YAML 作為 frontmatter，但 jus 使用 HTML，因為它可以包含在檔案中，而不會對其在 github.com 上的呈現方式產生不利影響。
Handlebars 範本可用於在您的頁面周圍包裝版面配置。
/layout.(html|hbs|handlebars|markdown|md) 的檔案，則預設會將其套用至所有頁面。{{{body}}} 字串，用作應呈現主要內容的預留位置。layout 這個字。layout: foo 將參照 /layout-foo.(html|hbs|handlebars|markdown|md) 版面配置檔案。layout: false 來停用版面配置。副檔名：html|hbs|handlebars|markdown|md|mdown
jus 提供了一些您可以在 handlebars 範本中使用的輔助函數。所有輔助函數都來自 lobars，這是直接從 lodash 中提取的公用程式函數集合。
lobars 包含比較輔助函數，例如 endsWith、eq、gt、gte、includes、isArray、isBoolean、isDate、isEmpty、isMatch、isNumber、isString、isSymbol、isUndefined、lt、lte、startsWith 等等。
以下是 gte（大於或等於）輔助函數的範例用法
\{{#gte age 21}}
You are old enough to drink in the United States.
\{{/gte}}
lobars 也提供用於操作輸入的輔助函數，例如 camelCase、capitalize、escape、kebabCase、lowerCase、lowerFirst、pad、padEnd、padStart、parseInt、repeat、replace、snakeCase、split、startCase、template、toLower、toUpper、trim、trimEnd、trimStart、truncate、unescape、upperCase、upperFirst 等等。
以下是如何使用字串輔助函數
\{{lowerCase someString}}
從影像中提取出的美味中繼資料會包含在Handlebars 上下文物件中，每個頁面都可以存取該物件。
副檔名：png|jpg|gif|svg
JSON 和 YML 檔案會載入Handlebars 上下文物件，每個頁面都可以存取該物件。
副檔名：json|yaml|yml
jus 使用與 GitHub Pages 和 surge.sh 相容的乾淨 URL 策略。實質上，頁面會將其副檔名去除，而名為 index 的頁面會繼承其目錄的名稱。
| 檔案名稱 | 網址 |
|---|---|
| index.html | / |
| nested/index.html | /nested |
| nested/page.html | /nested/page |
| also/markdown.md | /also/markdown |
| also/handlebars.hbs | /also/handlebars |
| stylesheet.scss | /stylesheet.css |
| stylesheet.sass | /stylesheet.css |
| stylesheet.styl | /stylesheet.css |
| stylesheet.styl | /stylesheet.css |
將以下內容新增至您的 package.json
{
"scripts": {
"start": "jus serve",
"deploy": "npm run build && npm run commit && npm run push && npm run open",
"build": "jus build . dist",
"commit": "git add dist && git commit -m 'update dist'",
"push": "git subtree push --prefix dist origin gh-pages",
"open": "open http://zeke.sikelianos.com"
}
}
現在，只要您想發佈到 GitHub Pages，就執行
npm run deploy
注意：GitHub 的 使用者頁面（例如 yourname.github.io）是從 master 分支建構的，而 專案頁面（例如 yourname.github.io/project）是從 gh-pages 分支建構的。在設定 npm 腳本時請注意這一點。
注意：GitHub 的 CDN 可能需要一分鐘才能更新，因此在訪問時可能需要重新整理幾次。
surge.sh 是一個發佈靜態網站的超棒新平台。
安裝 Surge CLI
npm i -g surge
將以下內容新增至您的 package.json
{
"scripts": {
"start": "jus serve",
"deploy": "npm run build && npm run build && npm run open",
"build": "jus build . dist",
"push": "surge dist YOUR-URL",
"open": "open YOUR-URL"
}
}
現在，只要您想發佈到 Surge，就執行
npm run deploy
jus 的靈感來自許多現有工具
有時候真實範例是學習最簡單的方式。看看這些用 jus 建立的開源網站
尋找更多靜態網站產生器。