marketing agency_one page template

마케팅 대행사 원 페이지 템플릿 - 보관

Maxim Orlov가 설계하고 코딩하는 평평하고 반응이 좋은 웹 사이트 템플릿.

포트폴리오를 기반으로 한 페이지 템플릿을 기반으로합니다

데모 : http://website-templates.github.io/marketing-agency_one-page-template

내용물

• 폴더 및 파일 구조
• 요구 사항 :
  • editorConfig
• 시작하는 방법
• 사이트 구성
• 작업
  • 대청소
  • 데브
  • 짓다
  • 재건
  • 섬기는 사람
  • 요정
• 라이브 리로드
• 특허

폴더 및 파일 구조

 ./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   └── aliases.js
│   |
|   └── task.js
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
|   ├── sass/                                  * sass preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

요구 사항

• node.js
• Sytem 빌드 : Grunt 또는 Gulp
• 선택적으로 :
  • editorConfig

editorConfig

이 프로젝트에는 루트에 .editorconfig 파일이 있습니다. 인트 스타일, 후행 공백 등을 설명합니다. 자세한 내용은 여기를 참조하십시오.

시작하는 방법

Gulp를 사용하지 않은 경우 시작 가이드를 확인하십시오.

시작하기 전에 전 세계적으로 Gulp 뿐만 아니라 NPM을 설치해야합니다.

시작하기위한 몇 가지 간단한 단계 :

• 실행 : npm install 로 package.json 에서 종속성을 설치하십시오.
• 아래 목록에서 작업을 실행하고 탈출을 시작하십시오!
• dev/data/config.json 에서 일반 설정 편집 사이트 구성 섹션을 참조하십시오

사이트 구성

이 보일러 플레이트는 외부 데이터 구성과 함께 퍼그 템플릿을 사용합니다. 기본 설정은 dev/data/config.json 파일에서 찾을 수 있습니다. config.key-name 있는 템플릿에서 사용할 수 있습니다

작업

여기에 몇 가지 설명이있는 Gulp 작업 그룹이 있습니다

대청소

작업 디렉토리에서 자리 표시자를 제거하십시오. Gulp : gulp cleanup

• gitkeep 파일을 제거하십시오

데브

정적 서버를 사용한 DEV 작업. Gulp : gulp dev

• 묶음 Javascripts
• Sass 스타일 시트를 컴파일합니다
• CSS에 공급 업체 접두사를 추가하십시오
• CSS 파일의 미디어 쿼리를 결합하십시오
• 퍼그 템플릿을 컴파일합니다
• 도우미 및 기타 자산을 동기화하십시오
• 글꼴 동기
• 이미지 동기화
• Live Reload를 사용하여 BrowserSync 정적 서버를 실행하십시오
• 변경 사항을 확인하고 개발 작업을 실행하십시오

짓다

작업을 구축하십시오. Gulp : gulp build

• 이미지를 조정하십시오
• JavaScript 파일을 조정하십시오
• 스타일 시트를 조정하십시오
• HTML을 미치십시오
• BrowserSync 정적 서버를 실행하십시오

재건

모든 작업을 실행하여 프로젝트를 재생하고 구축하십시오. Gulp : gulp rebuild

• 묶음 Javascripts
• Sass 스타일 시트를 컴파일합니다
• CSS에 공급 업체 접두사를 추가하십시오
• CSS 파일의 미디어 쿼리를 결합하십시오
• 퍼그 템플릿을 컴파일합니다
• 도우미 및 기타 자산을 동기화하십시오
• 글꼴 동기
• 이미지 동기화
• 이미지를 조정하십시오
• JavaScript 파일을 조정하십시오
• 스타일 시트를 조정하십시오
• HTML을 미치십시오

섬기는 사람

변경 사항을 보지 않고 서버를 실행하십시오. Gulp : gulp server

• BrowserSync 정적 서버를 실행하십시오

라이브 리로드

이 프로젝트는 활성화되고 구성된 라이브 재 장전 옵션을 사용하여 BrowserSync를 정적 서버로 사용합니다.

특허

MIT