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

스타일 및 스크립트 파일을 린트합니다.

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 페이지에 배포합니다.

옵션

• 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. 변경 사항을 검토할 수 있도록 Pull Request 를 제출하세요.

참고 : 끌어오기 요청을 하기 전에 "업스트림"의 최신 항목을 병합하세요!

특허

MIT © 汪磊