gulp pug starter 다운로드 - gulp pug starter 소스 코드 다운로드

gulp pug starter

웹사이트 데이터

1.0.0

다운로드

Gulp-Pug-Starter

특이성

BEM 수업
BEM 구조가 사용됩니다
퍼그 및 SCSS 과도가 사용됩니다
Babel 트랜스 파워는 브라우저에서 최신 JavaScript (ES6)를 지원하는 데 사용됩니다.
WebPack은 JavaScript 모듈을 조립하는 데 사용됩니다
하드 코드가 사용됩니다
오류에 대한 코드 점검은위원회 앞에서 사용됩니다.

설치

nodejs를 설치하십시오
전 세계 설치 :
- 원사 : npm i -g yarn
- gulp : npm i -g gulp
- BEM 도구 : npm i -g bem-tools-core
Git : git clone https://github.com/andreyalexeich/gulp-pug-starter.git 사용하여 어셈블리를 다운로드하십시오
다운로드 된 어셈블리 폴더 : cd gulp-pug-starter 로 이동하십시오
yarn set version berry 입력하십시오
필요한 종속성을 다운로드하십시오 : yarn
작업을 시작하려면 명령을 입력하십시오 : yarn run dev (개발 모드)
프로젝트를 수집하려면 yarn run build 명령 (어셈블리 모드)을 입력하십시오.

모든 일을 제대로 한 경우 로컬 서버로 브라우저를 열어야합니다. 어셈블리 모드에는 프로젝트 최적화와 같은 이미지 압축, 서버로 다운로드하기위한 CSS 및 JS 파일의 최소화가 포함됩니다.

파일 구조

 gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

폴더의 루트 :
- .babelrc.js 바벨 설정
- .bemrc.js BEM 설정
- .eslintrc.json -eslint 설정
- .gitignore GIT 파일 추적 금지
- .stylelintrc 스타일링 설정
- .stylelintignore 스타일링 파일 추적 금지
- .yarnrc.yml 설정 원사
- gulpfile.babel.js gulp 설정
- webpack.config.js 웹 팩 설정
- package.json 종속성 목록
src 폴더 - 개발 중에 사용 :
- BEM 블록 및 구성 요소 : src/blocks
- 글꼴 : src/fonts
- 이미지 : src/img
- JS 파일 : src/js
- 사이트 페이지 : src/views/pages
- SCSS 파일 : src/styles
- 사무실 퍼그 파일 : src/views
- GZIP 설정이있는 Apache 웹 서버 구성 파일 : src/.htaccess
dist yarn run dev
gulp-tasks Folder-A Gulp 작업이 포함 된 폴더

⌨️ 팀

yarn run lint:styles - SCSS 파일을 확인하십시오. VSCODE의 경우 플러그인을 설치해야합니다. WebStorm 또는 PhpStorm의 경우 Languages & Frameworks - Style Sheets - Stylelint (파일을 저장하는 동안 오류가 자동으로 수정됩니다).
yarn run dev - 프로젝트 개발을위한 서버 시작
yarn run build - 서버를 시작하지 않고 최적화로 프로젝트 수집
yarn run build:views - 퍼그 파일을 컴파일합니다
yarn run build:styles - SCSS 파일을 컴파일합니다
yarn run build:scripts - JS 실패를 수집합니다
yarn run build:images - 이미지 수집
yarn run build:webp 이미지를 .webp 형식으로 조정합니다.
yarn run build:sprites - 새싹을 모으십시오
yarn run build:fonts - 글꼴 수집
yarn run build:favicons Favikonki를 수집하십시오
yarn run build:gzip 아파치 구성을 수집합니다
yarn run bem-m -ADD BEM 블록
yarn run bem-c 구성 요소를 추가하십시오
yarn run lint:styles --fix 오류
yarn run lint:scripts - JS 실패를 확인하십시오
yarn run lint:scripts --fix 오류

사용 권장 사항

웹 사이트 개발에 대한 구성 요소 접근

각 BEM 블록에는 src/blocks/modules 내에 자체 폴더가 있습니다
하나의 BEM 블록의 폴더에는 하나의 퍼그 파일, 하나의 SCSS 파일 및 하나의 JS 파일이 포함됩니다 (블록이 스크립트를 사용하는 경우)
- 블록 퍼그 파일은 src/views/index.pug 파일 (또는 블록이 호출되는 필요한 페이지 파일)으로 가져옵니다.
- 블록의 SCSS-File은 src/blocks/modules/_modules.scss 파일
- Block JS 파일은 src/js/import/modules.js 로 가져옵니다

BEM 블록이있는 폴더의 구조의 예 :

 blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

해당 폴더와 파일을 수동으로 만들지 않기 위해 콘솔에서 다음 명령을 처방하는 것으로 충분합니다.

yarn run bem-m my-block src/block/modules (메인 BEM 블록의 경우)에서 BEM 블록을 생성합니다. 여기서 my-block BEM 블록의 이름입니다 (생성 후 BAM 블록 JS 파일의 내용을 삭제해야 함).
yarn run bem-с my-component src/blocks/components (구성 요소의 경우)에서 구성 요소를 생성합니다. 여기서 my-component 구성 요소의 이름입니다 (생성 후 BEM 구성 요소 js 파일의 내용을 삭제해야 함);

구성 요소

구성 요소 (예 : 아이콘, 버튼)는 불순물을 사용하여 퍼그에서 발행됩니다.
각 구성 요소에는 src/blocks/components 내에 자체 폴더가 있습니다
하나의 구성 요소의 폴더에는 하나의 퍼그 파일, 하나의 SCSS 파일 및 하나의 JS 파일이 포함됩니다 (구성 요소가 스크립트를 사용하는 경우)
- 구성 요소 퍼그 파일은 src/views/index.pug (또는 구성 요소가 호출되는 필요한 페이지 파일로 가져옵니다)
- 구성 요소 SCSS 파일은 src/blocks/components/_components.scss 파일로 가져옵니다.
- 구성 요소 js 파일은 src/js/import/components.js 파일로 가져옵니다.

프로젝트의 페이지

프로젝트 페이지는 src/views/pages 폴더에 있습니다
- 각 페이지 (메인 페이지 포함) src/views/layouts/default.pug 상속합니다. PUG 템플릿 템플릿
- 메인 페이지 : src/views/index.pug

글꼴

글꼴은 src/fonts 폴더에 있습니다
- .woff 형식과 .woff2 를 사용하십시오
- 글꼴은 src/styles/base/_fonts.scss 파일에 연결됩니다
- 이 서비스를 사용하여 로컬 글꼴을 조정할 수 있습니다

이미지

이미지는 src/img 폴더에 있습니다
- 이미지는 자동으로 .webp 형식으로 변환됩니다. 여기에 사용되는 자세한 정보
- Favikonok 생성의 이미지는 src/img/favicon 폴더에 있어야하며 크기는 1024px x 1024px 이상입니다.

SVG

스프라이트를 만들려면 .svg 이미지는 src/img/sprites 폴더에 있어야합니다. 예를 들어, icon-1.svg , icon-2.svg 및 icon-3.svg 파일이 있으며 icon-2.svg 에 문의해야합니다. 이렇게하려면 HTML에서 use 태그를 사용해야합니다.

svg
    use ( xlink:href = "img/sprites/sprite.svg#logo" )

CSS의 스프라이트에서 SVG-ICONS 스타일을 변경하십시오.

 svg use {
    fill : red;
}

아이콘의 스타일을 변경할 수없는 상황이 있습니다. 이는 Figma에서 SVG로 내보낼 때 추가 코드가 추가되기 때문입니다. 예를 들어:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

fill="none" 및 fill="#1B1B1D" 제거해야합니다. 다음과 같이 나와야합니다.

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg >

Forter Libraries

모든 세 번째 -파티 라이브러리는 node_modules 폴더에 설치됩니다.
- 다운로드하려면 yarn add package_name 명령을 사용하십시오
- 라이브러리 JS 파일을 연결하려면 BEM 블록 JS 파일의 시작 부분에서 가져 오기 (즉, 스크립트를 사용하는 BEM 블록)에서 가져옵니다.
```
 import $ from "jquery" ;
```
- 라이브러리의 스타일링 파일을 연결하려면 src/styles/vendor/_libs.scss 파일로 가져 오십시오.
- 라이브러리의 JS 파일 및 스타일 파일은 스스로 변경할 수 없습니다.