pages boilerplate

ページ-定型文

すばらしい静的サイトをスキャフォールディングするのはいつも楽しいです。

はじめる

 # clone repo
$ git clone https://github.com/zce/pages-boilerplate.git my-awesome-pages
$ cd my-awesome-pages
# install dependencies
$ yarn # or npm install 

使用法

$ yarn < task > [options]

例えば

 # Runs the app in development mode
$ yarn serve --port 5210 --open
# Builds the app for production to the `dist` folder
$ yarn build --production

利用可能なスクリプト

yarn lintまたはnpm run lint

スタイルとスクリプト ファイルを lint します。

yarn compileまたはnpm run compile

スタイル、スクリプト、ページ ファイルをコンパイルします。

yarn serveまたはnpm run serve

自動サーバーを使用して開発モードでアプリを実行します。

オプション

• open : 起動時にブラウザを開きます、デフォルト: false
• port : サーバーポートを指定します、デフォルト: 2080

yarn buildまたはnpm run build

実稼働用のアプリをdistフォルダーにビルドします。最高のパフォーマンスを得るために、本番モードでソースを縮小します。

オプション

• production : プロダクションモードフラグ、デフォルト: false
• prod : productionへのエイリアス

yarn startまたはnpm run start

実稼働モードでプロジェクトを実行します。

オプション

• open : 起動時にブラウザを開きます、デフォルト: false
• port : サーバーポートを指定します、デフォルト: 2080

yarn deployまたはnpm run deploy

distフォルダーを GitHub Pages にデプロイします。

オプション

• branch : プッシュ先のブランチの名前、デフォルト: 'gh-pages'

yarn cleanまたはnpm run clean

distファイルとtempファイルをクリーンアップします。

フォルダー構造

 └── my-awesome-pages ································· project root
   ├─ public ········································· static folder
   │  └─ favicon.ico ································· static file (unprocessed)
   ├─ src ············································ source folder
   │  ├─ assets ······································ assets folder
   │  │  ├─ fonts ···································· fonts folder
   │  │  │  └─ pages.ttf ····························· font file (imagemin)
   │  │  ├─ images ··································· images folder
   │  │  │  └─ logo.png ······························ image file (imagemin)
   │  │  ├─ scripts ·································· scripts folder
   │  │  │  └─ main.js ······························· script file (babel / uglify)
   │  │  └─ styles ··································· styles folder
   │  │     ├─ _variables.scss ······················· partial sass file (dont output)
   │  │     └─ main.scss ····························· entry scss file (scss / postcss)
   │  ├─ layouts ····································· layouts folder
   │  │  └─ basic.html ······························· layout file (dont output)
   │  ├─ partials ···································· partials folder
   │  │  └─ header.html ······························ partial file (dont output)
   │  ├─ about.html ·································· page file (use layout & partials)
   │  └─ index.html ·································· page file (use layout & partials)
   ├─ .csscomb.json ·································· csscomb config file
   ├─ .editorconfig ·································· editor config file
   ├─ .gitignore ····································· git ignore file
   ├─ .travis.yml ···································· travis ci config file
   ├─ CHANGELOG.md ··································· repo changelog
   ├─ LICENSE ········································ repo license
   ├─ README.md ······································ repo readme
   ├─ gulpfile.js ···································· gulp tasks file
   ├─ package.json ··································· package file
   └─ yarn.lock ······································ yarn lock file

関連している

• zce/x-pages - 静的ページ サイト向けのフルマネージド gulp ワークフロー。

貢献する

1. GitHub にフォークしてください!
2. 自分のマシンにフォークのクローンを作成します。
3. 機能ブランチをチェックアウトします: git checkout -b my-awesome-feature
4. 変更を独自のブランチにコミットします: git commit -am 'Add some feature'
5. 作業をフォークにプッシュして戻します: git push -u origin my-awesome-feature
6. 変更を確認できるよう、プル リクエストを送信してください。

注: プル リクエストを行う前に、必ず「アップストリーム」から最新のものをマージしてください。

ライセンス

MIT © 汪磊