Skip to content

terry90918/frontend-starter-kit

Repository files navigation

前端開發自動化

前端開發樣板自動化套件整理。

必須安裝

步驟

開始囉!

安裝 Git

官方下載 Git 並安裝好。連結

設定 Git 使用者

安裝好 Git 之後,瀏覽安裝的目錄,可以看到 Git Bash,開啟 Git Bash 輸入以下指令,設定「使用者名稱」user.name 和「使用者信箱」user.email

git config --global user.name "你的 GitHub 用戶名"
git config --global user.email "你的 GitHub 註冊信箱"

--global:全域設定

生成 ssh 密鑰

如果你要推送到自己的 GitHub 就必須要生成 ssh 密鑰,輸入以下指令。

ssh-keygen -t rsa -C "你的 GitHub 註冊信箱"

此時,在用戶文件夾下就會有一個新的文件夾 .ssh,裡面有剛剛創建的 ssh 密鑰文件 id_rsa 和 id_rsa.pub

id_rsa 文件是私鑰,要妥善保管,id_rsa.pub 是公鑰文件。

設定 GitHub 公鑰

連結到 GitHub 網站,添加公鑰的位置是在 GitHub > Settings > SSH and GPG keys > 點擊 New SSH key 按鈕。 將 id_rsa.pub 中的內容複製到 Key 文本框中,然後點擊 Add SSH key(添加 SSH)按鈕。

測試 SSH

接下來會出來下面的確認信息。

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 17:24:ac:a5:76:28:24:36:62:1b:36:4d:eb:df:a6:45.
Are you sure you want to continue connecting (yes/no)? yes

輸入 yes 後按鍵盤 Enter

Hi "你的帳號"! You've successfully authenticated, but GitHub does not provide shell access.

下載 GitHub 專案

輸入以下指令,從 GitHub 下載此專案!

git clone https://github.com/TpWILovePanda/frontend-starter-kit.git

下載好之後,移動到 frontend-starter-kit 資料夾。

cd frontend-starter-kit

安裝 Bower、Gulp

npm install -g gulp bower

安裝套件

使用 npm 和 bower 進行安裝開發用工具套件

npm install && bower install

啟動

恭喜你都安裝完成囉,輸入以下指令開始使用吧!別忘記在瀏覽器輸入 localhost:7777

gulp

使用的套件與相關連結

使用到的套件列表。

gulp-jade

HTML 樣板語言。連結

gulp-sass

強大的 CSS 預處理器。連結

gulp-plumber

讓 Gulp 在運行的過程中遇錯不會中斷。連結

gulp-postcss

強大的 CSS 後處理器。連結

autoprefixer

自動為 CSS 補上前綴詞。連結

gulp-load-plugins

簡化 gulp 載入流程。連結

gulp-babel

JavaScript ES6 編譯工具。連結

babel-preset-es2015

JavaScript ES6 編譯工具。連結

gulp-sourcemaps

標示壓縮、合併程式碼的原始位置。連結

gulp-concat

合併串接程式碼。連結

Browser Sync

前端愛用的 Web Server。連結,包含 Livereload。連結

main-bower-files

Bower 工具。連結

gulp-minify-css

CSS 壓縮工具。連結

gulp-uglify

JavaScript 壓縮工具。連結

minimist

將指令碼匯入 gulp 流程。連結

gulp-if

將 gulp 加入判斷式。連結

gulp-clean

刪除文件和文件夾。連結

gulp-sequence

依次運行一系列的 gulp task 任務。

gulp-imagemin

圖片壓縮 Minify PNG, JPEG, GIF 和 SVG images。連結

gulp-gh-pages

public 檔案,可以快速發佈內容到 Github Pages。連結

gulp-data

主要目的是返回 ( return ) 一個物件。連結

循序安裝流程

要先引入 gulp 前端自動化 const gulp = require('gulp');

  1. HTML 樣板語言。
    • const pug = require('gulp-pug');
  2. 強大的 CSS 預處理器。
    • const scss = require('gulp-sass');
  3. 讓 Gulp 在運行的過程中遇錯不會中斷。
    • const plumber = require('gulp-plumber');
  4. CSS 套件。
    1. 強大的 CSS 後處理器。
      • const postCss = require('gulp-postcss');
    2. 自動為 CSS 補上前綴詞。
      • const autoprefixer = require('autoprefixer');
  5. 簡化 gulp 載入流程。
    • const $ = require('gulp-load-plugins');
  6. JavaScript ES6 編譯工具。
    • const babel = require('gulp-babel');
  7. 標示壓縮、合併程式碼的原始位置。
    • const sourcemaps = require('gulp-sourcemaps');
  8. 合併串接程式碼。
    • const concat = require('gulp-concat');
  9. Bower 工具。
    • const mainBowerFiles = require('main-bower-files');
  10. 使用 Bower 工具時,可以透過陣列排列自己所需要的順序。
    • const order = require('gulp-order');
  11. Web Server 伺服器。
    • const browserSync = require('browser-sync').create();
  12. 壓縮工具。
    1. CSS 壓縮工具,不推薦使用,作者不再維護。
      • const minifyCss = require('gulp-minify-css');
    2. CSS 壓縮工具,推薦使用。
      • const cleanCss = require('gulp-clean-css');
    3. JavaScript 壓縮工具。
      • const uglify = require('gulp-uglify');
  13. 將指令碼匯入 gulp 流程。
    • const minimist = require('minimist');
  14. 將 gulp 加入判斷式。
    • const gulpif = require('gulp-if');
  15. 刪除文件和文件夾。
    • const clean = require('gulp-clean');
  16. 依次運行一系列的 gulp task 任務。
    • const gulpSequence = require('gulp-sequence');
  17. 圖片壓縮 Minify PNG, JPEG, GIF and SVG images。
    • const imagemin = require('gulp-imagemin');
  18. public 檔案,可以快速發佈內容到 Github Pages。
    • const ghPages = require('gulp-gh-pages');
  19. 重新命名檔案,依情況調整引入。
    • const rename = require('gulp-rename');

gulp 載入分類

未使用簡化 gulp 載入流程gulp-load-plugins)引入分類,詳細可參考 gulpfile2.js

const gulp = require('gulp'); // 前端自動化

// HTML
const pug = require('gulp-pug');

// CSS
const scss = require('gulp-sass');
const postCss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cleanCss = require('gulp-clean-css');

// JavaScript
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// 圖片
const imagemin = require('gulp-imagemin');

// 其它
const plumber = require('gulp-plumber');
const $ = require('gulp-load-plugins');
const mainBowerFiles = require('main-bower-files');
const order = require('gulp-order');
const browserSync = require('browser-sync').create();
const minimist = require('minimist');
const gulpif = require('gulp-if');
const clean = require('gulp-clean');
const gulpSequence = require('gulp-sequence');

// const rename = require('gulp-rename'); // 重新命名檔案,依情況調整

安裝指令套件

npm install 中的 --save--save-dev差異,取決於你放出的產品流程,需不需要載入 gulp

  • 如果你的產品流程需要用到 gulp,就要用 --save
  • 如果你的產品流程不需要用到 gulp,就要用 --save-dev

舉例來說,產品架設於 Herok 上面,它預設只會安裝 --save 裡面的套件,如果你的產品需要用到 gulp 將不會運行!

  1. 只會安裝產品用的套件
    • npm install --only=prod
  2. 只會安裝開發用的套件
    • npm install --only=dev
  3. 它會保留你想要保留的環境,依據你的 package.json 做調整
    • npm prune --prod 保留產品用的套件
    • npm prune --dev 保留開發用的套件

Template Language

pug Template Language。

  1. include
    • 載入外部區塊
  2. block
    • 作為其它頁面的內容顯示區域
    • 與 Extend 一起使用
  3. extend
    • 將其它頁面作為延伸
    • 內容會在 block 內出現

參考資源 (References)

關於作者(Author)

版權許可(License)

  • MIT