웹 페이지 등의 로딩을 최적화하기 위해 이미지, JS 및 CSS 파일을 압축합니다. 이 프로세스를 단순화하려면 Andrey Gorokhov가 지속적으로 개선하고 있는 Gulp 4 프로젝트 빌드를 사용하는 것이 좋습니다. 아래에 다운로드 링크가 표시되지만 지금은 설명 및 설치의 주요 사항을 살펴보겠습니다.
꿀꺽 프로젝트 빌더
Gulp는 위에서 설명한 작업을 자동화하는 도구인 프로젝트 빌더입니다. 작업 속도를 높이고 프로젝트 출시를 유능하게 준비하는 데 도움이 될 것입니다.
Github 리포지토리 또는 Git 명령줄을 통해 어셈블리를 다운로드할 수 있습니다. 앞으로는 필요에 맞게 사용자 정의할 수 있습니다.
특이점
- BEM 클래스 명명
- BEM 구조 사용
- SCSS 전처리기가 사용됨
- Babel 트랜스파일러를 사용하여 브라우저에서 최신 JavaScript(ES6) 지원
- Webpack에서 JavaScript 모듈을 빌드하는 데 사용
- 부트스트랩 기반의 CSS 그리드 스마트 그리드는 빠른 적응형 레이아웃에 사용됩니다.
- 하드 코드가 사용됨
설치
- NodeJS(필요한 경우) 및 Yarn 설치
- Git으로 빌드 다운로드: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
- gulp를 전역으로 설치: yarn global add gulp-cli
- 다운로드한 빌드 폴더로 이동합니다: cd gulp-scss-starter
- 필요한 종속성 다운로드: 원사
- 시작하려면 다음 명령을 입력하십시오. yarn run dev(개발 모드)
- 프로젝트를 빌드하려면 yarn run build(빌드 모드)를 입력합니다.
모든 작업을 올바르게 수행했다면 로컬 서버가 열려 있는 브라우저가 있어야 합니다. 빌드 모드에는 이미지 압축, 서버에 업로드하기 위한 CSS 및 JS 파일 축소와 같은 프로젝트 최적화가 포함됩니다.
설치에 문제가 있는 경우 다음 비디오를 시청하십시오.
파일 구조
gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── 블록 │ ├── 글꼴 │ ├── img │ ├── js │ ├── 스타일 │ ├── 보기 │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── .bemrc.js ├── .eslintrc.json ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore- 폴더 루트:
- .babelrc.js - 바벨 설정
- .bemrc.js - BEM 설정
- .eslintrc.json - ESLint 설정
- .gitignore - Git이 파일을 추적하지 못하도록 방지
- .stylelintrc - 스타일린트 설정
- .stylelintignore - Stylelint가 파일을 추적하지 못하도록 방지
- gulpfile.babel.js - 꿀꺽 꿀꺽 설정
- webpack.config.js - 웹팩 설정
- package.json - 종속성 목록
- src 폴더 - 개발 중에 사용됨:
- BEM 블록: src/블록
- 글꼴: src/글꼴
- 이미지: src/img
- JS 파일: src/js
- 사이트 페이지: src/views/pages
- SCSS 파일: src/스타일
- HTML 파일: src/views
- gzip 설정이 있는 Apache 웹 서버 구성 파일(무손실 압축): src/.htaccess
- dist 폴더는 로컬 개발 서버가 시작되는 폴더입니다(yarn run dev 실행 시).
- gulp-tasks 폴더 - Gulp-tasks 폴더
팀
- yarn run lint:style - SCSS 파일을 확인합니다. VSCode를 사용하려면 플러그인을 설치해야 합니다. WebStorm 또는 PHPStorm의 경우 Languages & Frameworks - Style Sheets - Stylelint에서 Stylelint를 활성화해야 합니다(오류는 파일 저장 시 자동으로 수정됨).
- yarn run lint:style --fix - SCSS 파일의 오류 수정
- yarn run dev - 프로젝트 개발을 위한 서버 실행
- yarn run build - 서버를 시작하지 않고 최적화된 프로젝트 빌드
- 원사 실행 빌드 보기 - Pug 파일 컴파일
- 원사 실행 빌드 스타일 - SCSS 파일 컴파일
- 원사 실행 빌드 스크립트 - JS 파일 빌드
- 원사 실행 빌드 이미지 - 빌드 이미지
- yarn run build webp - 이미지를 .webp 형식으로 변환
- 원사 실행 빌드 스프라이트 - 스프라이트 수집
- 얀 실행 빌드 글꼴 - 빌드 글꼴
- 원사 실행 빌드 파비콘 - 빌드 파비콘
- 원사 실행 빌드 gzip - 빌드 Apache 구성
웹 사이트 개발에 대한 구성 요소 접근 방식
- 각 BEM 블록에는 src/blocks/modules 내부에 자체 폴더가 있습니다.
- 하나의 BEM 블록의 폴더에는 하나의 HTML 파일, 하나의 SCSS 파일 및 하나의 JS 파일이 포함됩니다(블록이 스크립트를 사용하는 경우).
- 블록 HTML 파일은 src/views/index.html 파일(또는 블록이 호출될 필수 페이지 파일)로 가져옵니다.
- 블록 SCSS 파일을 src/blocks/modules/_modules.scss 파일로 가져옵니다.
- 블록 JS 파일을 src/js/import/modules.js로 가져옵니다.
BEM 블록이 있는 폴더 구조의 예:
블록 ├── 모듈 │ ├── header │ │ ├── header.html │ │ ├── header.js │ │ ├── header.scss
해당 폴더와 파일을 수동으로 생성하지 않으려면 콘솔에서 bem create my-block 명령을 작성하여 BEM 블록 폴더를 생성하면 됩니다. 여기서 my-block은 BEM 블록의 이름입니다.
프로젝트 페이지
- 프로젝트 페이지는 src/views/pages 폴더에 있습니다.
- 메인 페이지: src/views/index.html
글꼴
- 글꼴은 src/fonts 폴더에 있습니다.
- .woff 및 .woff2 형식 사용
- 글꼴은 src/styles/base/_fonts.scss 파일에 포함되어 있습니다.
- 이 서비스를 사용하여 로컬 글꼴을 변환할 수 있습니다.
이미지
- 이미지는 src/img 폴더에 있습니다.
- favicon을 생성하기 위한 이미지는 src/img/favicon 폴더에 있어야 하며 크기는 1024px x 1024px 이상이어야 합니다.
- 이미지는 자동으로 .webp 형식으로 변환됩니다. 사용법에 대한 자세한 정보.
타사 라이브러리
- 모든 타사 라이브러리는 node_modules 폴더에 설치됩니다.
- 로드하려면 yarn add package_name 명령을 사용하세요.
- 라이브러리의 JS 파일을 포함하려면 BEM 블록(즉, 스크립트가 사용하는 BEM 블록)의 JS 파일 맨 처음에 가져옵니다. 예를 들면 다음과 같습니다.
가져오기$from 제이쿼리;
- 라이브러리 스타일 파일을 포함하려면 src/styles/vendor/_libs.scss 파일로 가져오십시오.
- 라이브러리의 JS 파일 및 스타일 파일은 독립적으로 변경할 수 없습니다.
⚠️ 프로젝트에서 여러 페이지에 포함되어야 하는 여러 라이브러리를 사용하는 경우 오류를 방지하려면 다음을 수행해야 합니다.
- src/js/import 경로를 따라 폴더 페이지 생성
- 페이지 폴더에서 페이지에 대한 js 파일(예: pageA.js )을 만들고 이 페이지에서만 사용되는 라이브러리를 거기에서 가져옵니다.
- 추가 페이지에 대해 동일한 단계 수행
- webpack.config.js 파일에서 진입점에 페이지 js 파일을 추가합니다. 예를 들면 다음과 같습니다.
항목: (메인: "./src/js/index.js", 페이지 A: "./src/js/import/pages/pageA.js", 페이지B: "./src/js/import/pages/pageB.js" }
- 필수 페이지에 컴파일된 js 파일 포함
CSS 스마트 그리드
수도꼭지에는 Dmitry Lavrik의 스마트 그리드 CSS가 포함되어 있습니다. SCSS에서 믹스인을 사용하여 마크업에서 불필요한 클래스를 제거하고 적응형 레이아웃의 속도를 높일 수 있습니다. 부트스트랩 그리드에 따라 구성이 이미 설정되어 있습니다. 사용 예:
아이템( @include row-flex (); @include md (justify-content , center ); .item ( @include col (); @include size (3 ); @include size-md (5 ); @include size- xs(10); ) )
9월 24일 , 2016
다음 주제를 다룹니다: 소스 맵을 사용하여 sass 스타일 작업, js 파일 접착 및 압축, rjs로 requirejs 빌드, html 전처리, 파일 정리 및 복사, 이미지 최적화, 로컬 웹 서버 올리기 및 감시 모드 - watch-tasks. 기사에 오신 것을 환영합니다. 흥미로운 것들이 많이 있을 것입니다!
추신 많은 자료가 있으므로 이 기사는 어셈블리 기본 사항 및 프로젝트 구성, Backbone + Require.js에서 테스트 애플리케이션 작성, 꿀꺽 꿀꺽 실제로 빌드하는 세 부분으로 나뉩니다.
프론트엔드를 구축해야 하는 이유.
개발에서 가장 중요한 원칙 중 하나는 모듈성입니다. 프로젝트 코드를 여러 개의 작고 이상적으로 느슨하게 결합된 조각 모듈로 분할합니다. 이것은 단순한 자바스크립트 코드보다 훨씬 더 많은 것에 적용됩니다. 이것은 다양한 라이브러리에 대한 스타일 및 html 템플릿에 적용됩니다.
Backbone + Require로 작성된 간단한 애플리케이션의 구조는 다음과 같을 수 있습니다.
그리고 이것은 작은 테스트 프로젝트이며 실제 응용 프로그램에는 수백, 수천 개의 파일이 있을 수 있습니다. 사용자의 브라우저가 수백 개의 http 요청을 하도록 강제하는 것은 적어도 비인간적입니다. 우리는 우리가 작성한 서비스의 가장 빠른 로딩을 보장해야 합니다. 따라서 빌드 도구의 가장 중요한 작업 중 하나는 최소화하여 프로젝트에서 사용되는 파일 수를 줄이고 번들로 묶는 것입니다. 출력에는 다음과 같은 보다 간결한 구조가 있어야 합니다. 
그 차이는 명확하게 보입니다: 수십 개의 파일 대신 하나의 index.html, 하나의 css 파일, 별도의 폴더에 최적화되고 압축된 이미지가 있지만 스크린샷에는 표시되지 않습니다 :-)
또한 가장 흥미로운 점은 js 폴더에서 압축 파일이 3개만 수신되었다는 것입니다.
추신 왜 하나가 아닌 세 개인지는 나중에 말씀드리겠습니다.
이것은 곧 작성할 테스트 애플리케이션의 실제 구조입니다.
빌드 도구를 사용하는 한 가지 이유만 설명했지만 프로젝트에서 gulp, grunt, webpack 등을 사용하기 시작하기에 충분합니다. 그리고 우리가 거대한 서비스를 작성하는지, 작은 SPA(기사에서와 같이) 또는 랜딩 페이지를 작성하는지 여부는 중요하지 않습니다. 조립 원리는 모든 프로젝트에서 동일하며 솔루션에 대한 다양한 작업과 접근 방식에서만 다릅니다. 이 예제에서는 향후 어떤 식으로든 확장할 수 있는 구조를 생성하지만 출력은 항상 프로덕션인 전투 사이트에 쏟아질 준비가 된 깔끔한 파일 스택이 됩니다.
프로젝트를 올바르게 구성하는 방법.
원칙은 이것입니다: 개발자 파일이 있는 섹션이 있고, 수집된 파일이 있는 섹션이 있고, 이 항목이 제공하는 다른 모든 것이 있습니다. 프로젝트의 루트에 src 및 build라는 두 개의 폴더를 생성해 보겠습니다. src와 src에서만 우리는 일하고, 새 파일을 만들고, 편집하고 일반적으로 재미있게 지낼 것입니다. 수십 개의 파일이 있는 위의 스크린샷에서 테스트 프로젝트의 src 폴더 내용을 정확히 볼 수 있습니다. 그리고 바로 아래에는 빌드 폴더의 깔끔한 파일이 있습니다. 조립 도구에 의해서만 자동으로 형성되며 편집할 필요가 없습니다. 어쨌든 각 어셈블리마다 해당 내용을 새 파일로 덮어 씁니다 (개발 모드에서는 빌드 폴더가 전혀 없습니다. 눈에 거슬리지 않도록 삭제됩니다)
src 및 빌드 외에도 package.json, gulpfile.js 파일, node_modules 폴더 및 선택적으로 .gitignore(git로 작업하는 경우)가 루트에 있습니다. 당신은 여전히 내 장소에서 logs 폴더를 볼 수 있습니다 - 이것은 Apache의 제품이며 물론 git 저장소에서 제외하고 자체 폴더에 프로젝트 로그를 유지하는 오랜 습관입니다 :-)
전체 프로젝트 구조는 다음과 같습니다. 
빌드 내용에 따르면 질문이 없다고 생각합니다. src에 대해 자세히 설명하겠습니다.
- 1. html - index.html, 프로젝트의 루트 인덱스 파일. 루트 src에서 즉시 실행하지 않는 이유는 무엇입니까? gulp에 의해 전처리되고 생성되기 때문입니다. 어떻게, 우리는 나중에 어셈블리를 파악하게 될 때 알게 될 것입니다.
- 2. img - 이미지, 비압축, 일반
- 3. js - 프로젝트, 백본 모델 및 뷰의 모든 자바스크립트 이동
- 4. lib - backbone.js, require.js, lodash.js 등과 같은 타사 라이브러리
- 5. 스크립트 - 프로덕션 사이트에서는 필요하지만 개발 모드에서는 필요하지 않은 js 스크립트입니다. 이것은 분석, 다양한 실험 및 기타 마케팅 자료에 대한 코드를 나타냅니다.
- 6. 스타일 - 스타일이 있는 sass 파일. 조립된 css 파일은 동일한 폴더에 추가됩니다(개발 모드에만 해당).
- 7. tpl - html 템플릿. require.js 텍스트 플러그인을 사용하는 Backbone 뷰에서 사용
테스트 응용 프로그램의 모양은 다소 보기 흉합니다. 이런 종류의 쓰레기는 단일 js 파일없이 몇 줄의 html 및 css 코드로 수행된다고 말할 수 있습니다. 
그러나 우리의 목표는 아름다운 그림을 그리는 것이 아니라 신뢰할 수 있는 프로젝트 구조를 만들고 조립의 많은 측면을 고려하는 것입니다. 프로젝트가 수백 개의 파일로 커질 때 우리는 이 재앙에 대비하고 증가된 볼륨에 쉽게 대처할 것입니다. 따라서 테스트 응용 프로그램의 작음과 외부 비참함에도 불구하고 크고 복잡한 프로젝트의 조립 원리를 배웁니다.
어떤 조립 작업을 해결할 것입니까?
우리는 개발과 프로덕션이라는 두 가지 빌드 모드에 동의했음을 상기시켜 드립니다. 이 두 가지 모드를 염두에 두고 모든 작업을 작성할 것입니다. 개발 프로세스에서 모든 작업이 필요한 것은 아니며 생산을 위한 어셈블리에서 모두 필요한 것은 아닙니다.
다음은 테스트 애플리케이션을 작성한 후 수행할 작업 목록입니다.
- 1. 이전 빌드 결과에서 파일 및 폴더 정리
- 2. 압축 유무에 관계없이 sass 파일에서 css 빌드
- 3. 소스맵을 스타일에 연결하는 동시에 왜 이것이 필요한지 예를 들어 보여드리겠습니다.
- 4. requirejs로 js 번들 만들기
- 5. 개별 js 파일 접착 및 압축(분석)
- 6. HTML 전처리
- 7. 이미지 최적화 및 압축
- 8. 로컬 웹 서버 올리기
- 9. 개발 모드에서 작업할 때 파일 모니터링 작업 - watch-tasks
- 10. 별도의 작업을 힙으로 모으기 - 생산-조립 및 개발-작업을 위한 최종 작업
그래서 우리는 프론트엔드를 구축해야 하는 이유에 대해 논의하고, 프로젝트의 구조를 결정하고, 빌드에서 원하는 것을 자세히 분석하고, 테스트 애플리케이션에 대한 일반적인 용어로 이야기했습니다. 기사의 다음 부분에서는 Require.js와 함께 간단한 Backbone 애플리케이션을 작성할 것입니다. Backbone 및/또는 Require.js에 익숙하지 않더라도 걱정할 필요가 없습니다. 실제로 애플리케이션에 Backbone 코드가 충분하지 않습니다. 대신 좋아하는 라이브러리를 쉽게 사용하거나 javascript/jquery 코드를 작성하고 requirejs 구성 섹션을 건너뛸 수 있습니다.
이 설명서에는 유용하고 가장 일반적으로 사용되는 프런트 엔드 도구에 대한 설명이 포함되어 있습니다. 도구 설치 프로세스와 도구 사용의 주요 사항을 배울 수 있습니다.
고궁
소개
프로젝트를 개발하는 동안 타사 라이브러리 및 플러그인을 추가해야 하는 경우가 많습니다. 결과적으로 개발자는 필요한 종속성을 검색하고 아카이브를 다운로드하고 압축을 풀고 파일을 프로젝트에 복사해야 합니다. 패키지 관리자는 이 일상적인 작업을 자동화하는 데 도움이 됩니다.
패키지 관리자- 다양한 구성 요소의 설치, 제거, 구성 및 업데이트 프로세스를 관리할 수 있는 소프트웨어입니다.
패키지 관리자를 사용하여 타사 라이브러리를 추가하는 것은 터미널의 몇 가지 명령으로 대체됩니다.
프론트엔드 프로젝트에서 사용되는 패키지 관리자 중 하나는 NPM입니다.
npm(Node.js 패키지 관리자)는 Node.js에 포함된 패키지 관리자입니다. npm 클라우드 서버에서 패키지를 다운로드하거나 이 서버에 패키지를 업로드하는 데 사용됩니다.
공식 사이트
일의 시작
npm을 설치하려면 NodeJS를 다운로드하여 설치해야 합니다(npm은 자동으로 설치됨): https://nodejs.org/en/.
용법
패키지 설치
패키지는 일종의 라이브러리 또는 도구를 나타내는 하나 이상의 JavaScript 파일입니다. npm을 사용하여 패키지를 설치하려면 다음 명령을 실행합니다.
npm 설치<название пакета>
키는 전역적으로 패키지를 설치하는 데 사용됩니다. -g.설치 후 패키지는 소스와 함께 다음 디렉토리에 있습니다. node_modules/.
버전 확인
npm의 현재 버전을 확인하려면 다음 명령을 실행해야 합니다.
구성 파일 설정
파일 패키지.json애플리케이션에 대한 정보(이름, 버전, 종속성 등)를 포함합니다. 이 파일을 포함하는 모든 디렉토리는 Node.js 패키지로 해석됩니다.
파일을 만들려면 패키지.json다음 명령을 실행해야 합니다.
npm 초기화
그런 다음 프로젝트에 대한 몇 가지 정보를 입력해야 합니다.
이 파일은 프로젝트에 필요한 모든 패키지의 이름과 버전을 저장합니다. 명령으로 npm 설치당신은에있는 모든 패키지를 다운로드 할 수 있습니다 패키지.json.
일부 패키지를 설치하고 자동으로 package.json 파일에 저장하려면 다음 명령을 사용하십시오.
npm 설치<название пакета>--저장-개발
대안
실
특이점
- 웹 서버를 만들고 코드를 저장할 때 브라우저에서 페이지를 자동으로 다시 로드하고 프로젝트 파일의 변경 사항을 추적합니다.
- 다양한 JavaScript, CSS 및 HTML 전처리기(CoffeeScript, Less, Sass, Stylus, Jade 등) 사용.
- CSS 및 JS 코드 축소, 개별 프로젝트 파일을 하나로 최적화 및 연결.
- CSS에 대한 공급업체 접두사(브라우저 제조업체가 비표준 속성에 추가하는 CSS 속성 이름의 접두사) 자동 생성.
- 프로젝트 내에서 파일 및 폴더 관리(생성, 삭제, 이름 바꾸기)
- 운영 체제의 외부 명령 실행 시작 및 모니터링.
이미지 작업 - 압축, 스프라이트 생성, 크기 조정(png, jpg, svg 등). - FTP, SFTP 등을 통해 프로젝트 배포(외부 서버로 전송)
무한한 수의 Node.js 및 Gulp 유틸리티, 프로그램 및 플러그인 프로젝트에서 연결 및 사용. - 다양한 프로젝트 맵 생성 및 기타 수작업 자동화.
일의 시작
NodeJS 및 npm이 시스템에 설치되어 있어야 합니다.
1 단계: npm 패키지 관리자를 사용하여 GulpJS를 전체적으로 설치하려면 다음 명령을 실행하십시오.
npm 설치 꿀꺽 -g
2 단계:응용 프로그램에 대해 설치해야 합니다.
npm 설치 --save-dev gulp
프로젝트를 빌드할 때 사용할 수 있는 추가 플러그인 로드도 다음 명령과 함께 npm을 사용하여 수행됩니다.
npm 설치<название плагина>--저장-개발
설치된 모든 플러그인은 디렉토리에 있습니다. node_modules/.
용법
1 단계:먼저 연결해야합니다 꿀꺽프로젝트에. 이를 위해 파일에서 gulpfile.js다음 줄을 작성하십시오.
var gulp = 요구("꿀꺽");
기능 필요하다()폴더에서 플러그인을 연결할 수 있습니다. node_modules/.
2 단계:변수로 꿀꺽프로젝트를 빌드하기 위한 작업을 생성할 수 있습니다.
Gulp.task("exampleTask", function() ());
방법 일이름과 작업 본문이 포함된 함수의 두 가지 매개 변수를 사용합니다.
이 지침은 이미 사용 가능합니다. 이렇게 하려면 콘솔에 다음과 같이 작성합니다.
Gulp exampleTask
기본 명령
다음은 문의 더 복잡한 예입니다.
Gulp.task("exampleTask", function () ( return gulp.src("source-files") .pipe(plugin()) .pipe(gulp.dest("folder")); ));
이 예에서 사용된 명령을 분석해 보겠습니다.
- gulp.src- 플러그인에서 처리할 프로젝트 소스 파일 선택
- .파이프(플러그인())- Gulp 플러그인을 호출하여 파일을 처리합니다.
- .pipe(gulp.dest('folder')) - 결과 파일을 대상 폴더로 출력합니다.
파일 마스크
gulp.src 함수는 파일 마스크를 매개변수로 사용합니다. 마스크 예시:
- ./ – 현재 디렉토리;
- ../ – 상위 디렉토리;
- js/index.js- js 폴더의 index.js 파일
- js/*.js- js 폴더에 있는 js 확장자를 가진 모든 파일
- js/**/*.js- js 폴더와 하위 디렉토리에 있는 js 확장자를 가진 모든 파일
- !js/*.js– js 폴더에서 js 확장자를 가진 파일 제외.
시냇물
스레드 사용은 GulpJS의 가장 중요한 이점 중 하나입니다.
스트림을 사용하면 한 함수에서 다른 함수로 일부 데이터를 순차적으로 전달할 수 있으며 각 함수는 이 데이터에 대해 일부 작업을 수행합니다.
기능 gulp.src()매개변수로 전달되는 파일을 나타내는 객체 스트림을 생성합니다. 다음으로 함수를 사용하여 파이프개체 스트림이 전송되는 파이프라인이 구축됩니다. 매개변수로 이 함수는 객체의 흐름을 어떤 방식으로 처리하는 플러그인으로 전달됩니다.
아래는 스레드를 사용하는 예입니다. 이 예에서는 타사 플러그인이 사용됩니다. 꿀꺽-jshint그리고 꿀꺽 꿀꺽,설치 및 연결 gulpfile.js
기능 gulp.src마스크로 파일 가져오기 js/*.js. JSHint를 실행하고 결과를 출력합니다. 그런 다음 파일을 연결하고 마지막에 디렉터리에 연결 후 결과 파일을 저장합니다. 거리/.
Gulp.task("example", function () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest ("거리")); ));
타사 플러그인
타사 플러그인을 사용하는 예를 고려하십시오. 이를 위해 js 파일 연결 명령을 생성합니다.
1 단계:먼저 require 명령으로 플러그인을 포함해야 합니다.
var concat = require("gulp-concat");
2 단계:그런 다음 js/ 디렉토리에 있는 js 확장자와 파일을 연결하는 작업을 생성해야 합니다. 마지막에 결과 파일은 dist/js 디렉토리에 배치됩니다.
Gulp.task("concat", function () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") ); ));
꿀꺽 꿀꺽
추가 정보
다른 작업을 실행하게 하는 작업을 정의할 수도 있습니다.
Gulp.task("빌드", ["html", "css"]);
그외에도 방법이 있습니다 보다파일의 변경 사항을 관찰하려면 다음을 수행하십시오.
Gulp.watch("감시할 파일 마스크", ["파일이 변경될 때 실행할 작업 이름"]);
안에 gulpfile.js기본 작업을 만들 수 있습니다.
Gulp.task("default", ["task1", "task2"]);
이 작업은 다음 명령을 사용하여 콘솔에서 시작됩니다.
주요 플러그인
- gulp-autoprefixer– CSS 속성에 자동으로 접두사를 붙입니다.
- 꿀꺽 브라우저 동기화- 연결을 생성한 후 클라이언트 또는 서버 파일을 변경할 때 페이지를 자동으로 새로 고칩니다.
- 꿀꺽-uncss- CSS 파일의 최적화. 플러그인은 HTML 코드를 구문 분석하고 사용되지 않고 중복된 스타일을 모두 찾습니다.
- 꿀꺽-csso- CSS 축소기;
- 꿀꺽-htmlmin– 간단한 HTML 축소기;
- 꿀꺽-html힌트– HTML 유효성 검사기
- 꿀꺽 꿀꺽– 자바스크립트 축소기;
- 꿀꺽 꿀꺽– 파일 연결;
- 꿀꺽-웹 서버– 서버를 만들고 실행할 수 있습니다.
- 꿀꺽-jshint– JS 코드의 품질 확인
- 재스민 꿀꺽– 재스민 테스트 실행
- 꿀꺽-jsdoc- JSDoc 문서 생성.
여기에서 Gulp 플러그인의 전체 목록을 찾을 수 있습니다.
http://gulpjs.com/plugins/
대안
그런트JS
특이점
- 비동기 테스트 지원.
- 다른 개체에 관찰자(관찰자)를 노출할 수 있습니다.
일의 시작
Jasmine을 프로젝트에 연결하려면 라이브러리를 다운로드하고 기본 HTML 페이지에 다음 파일을 포함해야 합니다.
- lib/jasmine-*/jasmine.js- 프레임워크 자체
- lib/jasmine-*/jasmine-html.js- HTML 형식의 결과 등록
- lib/jasmine-*/jasmine.css- 테스트 결과의 출현
- SpecRunner.html- 테스트를 실행하기 위해 브라우저에서 열 파일.
악기와 동기화
GulpJS
Jasmine은 GulpJS 프로젝트 어셈블리에 포함될 수 있습니다.
1 단계:먼저 gulp-jasmine 플러그인을 설치해야 합니다.
npm 설치 gulp-jasmine --save-dev
2 단계:그런 다음 빌드 파일에 플러그인을 포함하고 테스트 실행 작업을 생성해야 합니다.
var jasmine = require("gulp-jasmine"); gulp.task("재스민", function() ( gulp.src("테스트 파일") .pipe(jasmine()); ));
KarmaJS
(기사 끝 부분에서 이 도구를 사용한 작업에 대해 자세히 설명합니다.)
KarmaJS에서 Jasmine을 연결하려면 다음이 필요합니다.
1 단계: KarmaJS 설치:
npm 설치 -g 카르마-클리
2 단계: Chrome 및 PhantomJS 브라우저에서 Jasmine으로 작성된 테스트를 실행하는 데 필요한 플러그인을 설치합니다.
npm 설치 karma-jasmine karma-chrome-launcher karma-phantomjs-launcher
3단계: Jasmine 자체를 설치합니다.
npm 설치 -g 재스민
4단계: Karma 구성 파일에서 플러그인을 연결하고 테스트 경로를 설정합니다.
용법
키워드
- 설명 - 일련의 테스트 정의
- 그것 - 테스트 정의;
- expect - 테스트에서 확인되는 기대치의 정의.
describe 및 it 함수는 두 개의 매개변수를 사용합니다. 첫 번째는 이름이고 두 번째는 코드가 포함된 함수입니다.
기본 테스트 예
describe("테스트 스위트 이름", function () ( it("테스트 이름", function () ( expect(2+2).toBe(4); )); ));결과 확인 방법
- 기대().toBe()– 변수가 같은지 확인('===');
- 기대().not.toBe()– 변수가 같은지 확인('!==');
- 기대().toEqual()– 내용을 포함하여 변수와 개체의 동등성을 확인합니다.
- 기대().toBeDefined()- 존재 확인;
- 기대().toBeUndefined()– 존재하지 않는지 확인하십시오.
- 기대().toBeNull()– null에 대한 변수 값을 확인합니다.
- 기대().toBeTruthy()- 진실 확인;
- 기대().toBeFalsy()- 허위 여부를 확인하십시오.
- 기대().toBeLessThan()– 값이 다음보다 작아야 하는지 확인;
- 기대().toBeGreaterThan()– 값이 보다 커야 하는지 확인;
- 기대().toBeCloseTo()– 값이 숫자에 가까워야 하는지 확인;
- 기대().toMatch()– 정규식 일치 확인
- 기대().toContain()– 배열의 내용을 확인합니다.
- 기대().toThrow()– 예외 호출 확인
- 기대().toHaveBeenCalled()– 함수 호출 확인.
추가 기능
테스트에 사용되는 로직을 복사하지 않기 위해 함수가 사용됩니다. 각각의 전/후. 각 테스트 전/후에 각각 실행됩니다.
함수는 비동기 호출을 테스트하는 데 사용됩니다. 뛰다그리고 기다립니다.
- 뛰다- 실행할 비동기 함수를 수락합니다.
- 기다립니다- 세 개의 매개변수를 취합니다. 첫 번째는 반환해야 하는 함수입니다. 진실,비동기 호출 함수인 경우 뛰다두 번째는 오류 메시지이고 세 번째는 대기 시간(밀리초)입니다.
관찰자
함수 호출을 추적하는 기능은 다음을 사용하여 수행됩니다. 을 감시하다. 이 함수는 두 개의 매개 변수를 사용합니다. 첫 번째는 함수가 호출되는 개체이고 두 번째는 추적할 함수의 이름입니다.
If(“함수 호출 테스트”, function () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(); ));
사용하여 테스트했을 때 을 감시하다통화 수, 매개 변수 및 각 통화를 개별적으로 추적할 수 있습니다.
구현 없이 함수를 만들려면 다음을 사용할 수 있습니다. createSpy. 기능 createSpy식별할 함수 이름을 사용합니다.
If("함수 호출 테스트", function () ( var example = createSpy("EXAMPLE"); example("param1", "param2"); expect(example.identify).toHaveBeenCalledWith("param1", "param2") ;expect(example.calls.length).toEqual(1); ));
스텁 개체는 다음을 사용하여 생성됩니다. createSpyObj. 매개변수로 createSpyObj개체의 이름과 스텁 개체의 메서드 목록인 문자열 배열을 사용합니다.
대안
모카
용법
문서는 소스 코드 주석에서 생성됩니다.
이 기사에서는 웹 프로젝트의 편안한 프런트 엔드 개발에 사용할 수 있는 Gulp 환경의 예를 고려할 것입니다. 이 예제는 기본적으로 Bootstrap 4 프레임워크를 기반으로 사이트 및 웹 애플리케이션을 생성하도록 구성되어 있습니다.
이 기사에서 다루는 프로젝트는 https://github.com/itchief/gulp-project-bootstrap-4의 Github에서 호스팅됩니다.
이 기사의 비디오:
Gulp 환경 설치 지침
환경을 만들려면 다음 프로그램이 설치되어 있어야 합니다.
- "Node.js"(이 페이지에서 운영 체제용 "Node.js" 설치 프로그램을 다운로드할 수 있습니다. 프로젝트에는 버전 10 이상이 필요합니다.)
- "Gulp"(콘솔에서 다음 명령을 실행하여 Gulp를 설치할 수 있습니다: npm install -g gulp-cli).
다음 단계는 npm 패키지와 해당 종속성을 설치하는 것입니다. 이렇게 하려면 콘솔(프로젝트의 루트 디렉터리에 있어야 함)에서 다음 명령을 실행해야 합니다.
npm 설치
이 명령은 환경 자체와 프런트 엔드 작업에 필요한 모든 패키지를 설치합니다. npm은 "package.json" 파일에 기록된 지침에 따라 이러한 작업을 수행합니다.
Bower 패키지 관리자를 사용하는 프로젝트의 첫 번째 버전(1.0.0)을 사용하는 경우 다른 명령을 실행해야 합니다.
정자 설치
이 프로그램은 "bower.json" 파일에 지정된 프런트엔드 패키지를 설치합니다.
Gulp 환경을 사용하는 방법?
명령 프롬프트를 열고(경로는 프로젝트의 루트 폴더를 가리켜야 함) gulp(일반 모드)를 입력합니다.
이 명령을 입력하면 기본 작업이 시작됩니다. "기본". 이 작업은 "build", "webserver" 및 "watch"와 같은 일련의 다른 작업을 차례로 실행합니다.
"빌드" 작업은 프로덕션용 프로젝트를 빌드합니다(예: "clean:build", "html:build", "css:build", "js:build", "fonts:build" 및 "image:build" 실행). "). 이러한 작업은 결과 프로젝트 파일을 "assets/build" 폴더에 배치합니다.
"webserver" 작업은 브라우저에서 페이지를 "라이브 다시 로드"하여 로컬 웹 서버를 실행하도록 설계되었습니다. 이를 통해 매우 쉽게 프로젝트를 보고 테스트를 수행할 수 있습니다.
"감시" 작업은 "assets/src" 폴더의 소스 파일에 대한 변경 사항을 추적하고 발생하는 경우 다른 작업을 실행하는 데 사용됩니다. 즉, 필요한 작업을 자동으로 실행하고 결과 파일("assets/build" 폴더의 내용)을 최신 상태로 유지할 수 있습니다.
또한 프로젝트의 한 부분 또는 다른 부분을 선택적으로(독립적으로) 조립할 수 있습니다.
예를 들어 사이트 일부의 CSS만 빌드하려면 다음 명령을 입력하면 됩니다.
css 꿀꺽:빌드
기타 작업 목록:
gulp clean:build // "assets/build" 디렉토리 정리 gulp html:build // HTML 파일 빌드 gulp js:build // JS 파일 빌드 gulp fonts:build // 글꼴 빌드 gulp image:build / / 조립 이미지로
Gulp 환경에 대한 설명
이 섹션에서는 다음을 분석합니다.
- Gulp 환경의 주요 도구 및 파일 구조
- Bootstrap 소스가 프로젝트에 연결되는 방식과 구성 방식
- Gulp 프로젝트를 독립적으로(처음부터) 초기화하고 종속성을 설치하는 방법(기성품 package.json을 사용하지 않고)
- Bower를 초기화하고 처음부터 프런트엔드 패키지를 설치하는 방법(기성품인 "bower.json"을 사용하지 않고)*;
- Gulp 프로젝트 빌더 파일(gulpfile.js)의 내용
* Bower 패키지 관리자는 버전 2.0.0 이후로 프로젝트에서 사용되지 않았습니다.
도구 목록
프론트 엔드 프로젝트(웹 사이트) 개발을 위한 환경은 다음 도구를 기반으로 구축됩니다.
- Node.js(환경이 실행될 환경)
- npm(Node.js에 포함된 패키지 관리자; Gulp, 플러그인 및 프런트엔드 패키지를 로드하는 데 사용됨)
- jQuery, Popover, Bootstrap(사이트의 css 및 js 부분을 빌드하는 데 사용되는 패키지);
- Gulp 및 해당 플러그인(프로젝트를 빌드하고 다른 웹 작업을 수행하는 데 사용됨).
프로젝트의 첫 번째 버전에서는 Bower 패키지 관리자가 추가로 사용되었습니다. jQuery, Popover 및 Bootstrap 라이브러리를 로드하는 데 사용되었습니다. 2.0.0부터 시작하는 프로젝트 버전에서 이러한 라이브러리는 npm을 사용하여 로드됩니다.
Gulp 프로젝트 파일 구조
프로젝트의 파일 구조는 다양한 방식으로 구성할 수 있습니다. 이는 특정 개발자의 기본 설정과 생성된 프로젝트에 따라 달라질 수 있습니다.
이 문서에서는 다음 구조를 따릅니다.
프로젝트의 루트에는 "assets" 폴더와 "gulpfile.js", "package.json" 파일이 있습니다. "gulpfile.js" 파일에는 Gulp 프로젝트 빌더를 위한 작업이 포함됩니다.
프로젝트의 첫 번째 버전도 ".bowerrc" 및 "bower.json" 파일을 사용했습니다. "bower.json" 파일은 Bower 관리자의 구성 파일로, 로드에 필요한 프런트 엔드 패키지가 결정되었습니다. 이 프로젝트에서는 Bootstrap, jQuery 및 Popper를 로드하는 데 사용되었습니다.
"assets" 폴더에는 "src"(소스 파일용) 및 "build"(완성된 파일용; Gulp 빌더가 이 폴더에 파일을 넣습니다)의 두 폴더가 있습니다. "src" 폴더에는 "fonts"(글꼴용), "img"(소스 이미지용), "js"(js 파일용), "style"(스타일용) 및 "template"(HTML 조각용) 디렉토리가 포함되어 있습니다. 및 "index.html" 파일.
프로젝트의 첫 번째 버전에서 "src" 폴더에는 여전히 "bower_components" 디렉토리가 포함되어 있습니다. Bower를 사용하여 로드된 구성 요소를 위한 것입니다. 현재 버전에는 없습니다.
"js" 디렉토리에는 "main.js"와 "my.js"라는 두 개의 파일이 있습니다. "my.js" 파일은 자신의 스크립트를 작성하는 데 사용되며 "main.js"는 최종 js 파일에 내용을 포함해야 하는 파일 목록을 정의하는 데 사용됩니다. 최종 파일은 출력이 되어야 하는 파일입니다("build" 디렉토리에 있음).
"style" 디렉토리는 스타일용으로 예약되어 있습니다. 이 디렉토리에는 "main.scss"(최종 스타일 파일에 내용이 포함되어야 하는 파일 목록 포함), "my.scss"(스타일 작성에 사용됨) 및 "variables.scss"(SCSS 포함) Bootstrap 4의 스타일을 변경하고 변수를 만드는 데 사용할 변수).
"index.html" 파일은 생성되는 프로젝트의 메인 페이지입니다. "index.html" 외에도 다른 html 페이지를 이 디렉토리에 배치할 수 있습니다.
"템플릿" 디렉토리는 HTML 페이지의 일부를 여기에 배치하기 위한 것입니다. 예를 들어, 이 디렉토리에 "head.html" 및 "footer.html" 파일을 만들고 해당 내용을 한 번에 여러 페이지로 가져올 수 있습니다(//= path_to_file 구문 사용). 이렇게 하면 html 페이지를 더 쉽게 만들고 편집할 수 있습니다. 페이지의 개별 부분은 이미 별도의 파일에 있습니다.
Bootstrap 4 소스를 프로젝트에 연결하고 설정하기
부트스트랩 4 프레임워크를 프로젝트에 연결하는 다양한 방법과 작업 옵션이 있습니다.
가장 유연한 옵션은 소스 코드를 사용하는 것입니다. 이 경우 할 수 있을 뿐만 아니라 Bootstrap의 기본 스타일을 변경하는 것은 매우 쉽습니다., 뿐만 아니라 프로젝트에 연결 여기에 사용될 클래스 및 구성 요소만.
SCSS로 코딩된 부트스트랩 4 CSS 스타일 소스많은 수의 작은 파일로 표시됩니다.
SCSS 파일 목록("node_modules/bootstrap/scss/" 디렉토리에 있음): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot . scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions.scss " , "dropdown.scss" 등
이러한 각 파일은 특정 서비스 작업을 수행하거나 프레임워크 또는 구성 요소의 특정 기능 스타일 지정을 담당합니다. SCSS 파일에는 간결하고 이해하기 쉬운 이름이 있습니다. 그것들 만 사용하면 각각의 목적을 아주 정확하게 이해할 수 있습니다.
Bootstrap 4의 기본 스타일 사용자 정의 또는 변경이 완료되었습니다. SCSS 변수의 값을 재정의함으로써. 모든 SCSS 변수는 편의를 위해 한 곳에 수집됩니다("variables.scss" 파일). 그러나 물론 이 파일이 아니라 자신의 값을 다시 정의하는 것이 바람직합니다(예: "variables.scss"라는 이름이 있지만 "assets/style/variables.scss"에 있음).
예를 들어 테마 색상 변경 성공그리고 위험, $green 및 $red 변수의 값을 변경하여 수행됩니다.
// Bootstrap 4 변수의 기본값 재정의 $red: #cc2eaa; $녹색: #2ecc71;
메모 Bootstrap 4 변수를 CSS 파일("assets/style/variables.scss")에 복사한 후 태그를 제거해야 합니다!
!default 레이블은 SCSS 변수를 기본값으로 설정하기 위한 것입니다. SCSS 변수에 이미 값이 있는 경우 !default 키로 지정된 새 값은 설정되지 않습니다.
CSS 컴파일에 포함되어야 하는 Bootstrap 4 소스 SCSS 파일과 포함되지 않아야 하는 SCSS 파일 "assets/style/main.scss"를 통해 지정합니다. 즉, 컴파일 후 웹 페이지에 연결될 스타일 집합을 결정하는 것은 이 파일의 내용입니다.
또한 "assets/style/variables.scss"(부트스트랩 변수 재정의) 파일과 "assets/style/my.scss"(자신만의 스타일 생성) 파일도 이 파일에 연결됩니다.
"main.scss" 파일의 내용(예제):
// 기본 부트스트랩 4 변수를 재정의하고 고유한 @import "변수"를 정의합니다. // 필요한 부트스트랩 4 SCSS 소스 포함 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // SCSS 파일 포함 @import "my";
또한 일부 Bootstrap 4 구성 요소는 JavaScript 코드가 작동해야 합니다.
부트스트랩 4 js 파일 목록("node_modules/bootstrap/js/dist/" 디렉터리에 있음): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" 및 "toast.js".
Bootstrap 4 프레임워크의 어떤 js 파일이 프로젝트의 최종 js 파일에 포함되어야 하고 어떤 것이 포함되지 않는지 결정하는 것은 "main.js"를 통해 수행됩니다.
필요한 파일을 결과 build/main.js로 가져오는 작업은 다음 구성을 사용하여 수행됩니다.
//= 경로_파일
이 작업을 수행하는 것은 Gulp 플러그인 "gulp-rigger"입니다. 설치 및 연결 방법은 아래에서 설명합니다.
또한 jQuery, Popper(Dropdown, Tooltip 및 Popover 구성 요소 작업에 필요) 및 필요한 경우 자신의 js 파일을 이 파일로 가져올 수 있습니다.
"main.js" 파일의 내용(예제):
// jQuery 가져오기 //= ../../../node_modules/jquery/dist/jquery.js // 포퍼 가져오기 //= ../../../node_modules/popper.js/dist/umd /popper.js // 필요한 부트스트랩 4 js 파일 가져오기 //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/ bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/ dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown. js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../. ./../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // 다른 js 파일 가져오기 //= my . js
Gulp 프로젝트를 초기화하고 종속성을 처음부터 설치하는 방법은 무엇입니까?
프로젝트 개발은 일반적으로 "package.json" 파일(매니페스트) 생성으로 시작됩니다.
"package.json" 파일에는 프로젝트에 대한 일반 정보(이름, 버전, 설명, 작성자 이름 등)와 이 프로젝트가 의존하는 패키지에 대한 정보가 포함됩니다.
매니페스트를 만들려면 프로젝트의 루트 폴더로 이동하여 다음 명령을 입력해야 합니다.
npm 초기화 
명령을 입력한 후 다음 질문에 답해야 합니다.
- 프로젝트 이름(이름) - "bootstrap-4";
- 버전 번호(버전) – "2.0.0";
- description (설명) - "Bootstrap 4를 사용하여 프로젝트 시작";
- 저자(저자) - "웹사이트";
- 자식 저장소(git 저장소) - "";
- 진입점(entry point), 테스트 명령(test command), 라이센스(license), 키워드(keywords) - 기본값.
"괜찮습니까?"라는 질문에 "예"라고 대답하거나 Enter 키를 누릅니다.
결과적으로 "package.json" 파일이 프로젝트의 루트 폴더에 나타납니다.
이제 다음 명령을 사용하여 프로젝트에서 사용할 패키지를 설치해 보겠습니다.
npm install package_name --save-dev // "package.json" 파일의 "devDependencies" 섹션에 자동으로 추가되는 정보와 함께 패키지를 설치합니다. npm install package_name --save-prod // 정보와 함께 패키지를 설치합니다. about it 은 "package.json" 파일의 "dependencies" 섹션에 자동으로 추가됩니다.
"--save-dev" 또는 "--save-prod" 키는 이에 대한 정보를 포함할 "package.json" 파일의 섹션을 결정합니다.
프로젝트에서 사용할 패키지 목록:
npm install gulp --save-dev // gulp 설치 npm install browser-sync --save-dev // 브라우저 동기화 설치 npm install gulp-autoprefixer --save-dev // gulp-autoprefixer 설치 npm install gulp-cache - -save-dev // gulp-cache 설치 npm install gulp-clean-css --save-dev // gulp-clean-css 설치 npm install gulp-rimraf --save-dev // gulp-clean-css 설치 npm 설치 gulp-imagemin --save-dev // gulp-imagemin 설치 npm install gulp-plumber --save-dev // gulp-plumber 설치 npm install gulp-rigger --save-dev // gulp-rigger 설치 npm install gulp- sass --save-dev // gulp-sass npm 설치 gulp-sourcemaps --save-dev // gulp-sourcemaps 설치 npm install gulp-uglify --save-dev // gulp-uglify npm 설치 imagemin-jpeg- 설치 recompress --save-dev // imagemin-jpeg-recompress npm 설치 imagemin-pngquant --save-dev // imagemin-pngquant npm 설치 gulp-rename 설치 --save-dev // imagemin-pngquant npm 설치 jquery - -save-prod npm 설치 popper.js --save-prod npm 설치 부트스트랩 --save-prod
모든 종속 항목을 설치하면 package.json 파일에 다음 내용이 포함됩니다.
( "이름": "bootstrap-4", "버전": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "종속성": ( "jquery": "^3.4.1" , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "browser-sync": "^2.26.7", "gulp": "^ 4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf ": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp -sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0 ", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" ) )
Bower를 초기화하고 처음부터 프런트엔드 패키지를 설치하는 방법은 무엇입니까?
Bower가 패키지를 다운로드할 폴더를 정의합시다. 이렇게 하려면 .bowerrc 파일을 만들고 다음을 입력합니다.
( "디렉토리": "assets/src/bower_components/" )
.bowerrc 파일을 저장합니다. 이제 모든 구성 요소가 assets/src/ 에 있는 bower_components 디렉토리에 로드됩니다.
Bower를 초기화합시다(bower.json 매니페스트 파일 생성). bower.json 파일 생성은 다음 명령을 사용하여 수행할 수 있습니다(프로젝트의 루트 폴더에 있음).
정자 초기화 
그 후에 다음 질문에 답해야 합니다.
- 프로젝트 이름(이름) - bootstrap-4;
- description (설명) - Bootstrap 4 - 사이트에서 프로젝트 시작;
- 저자 (저자) - 사이트;
- 설치된 구성 요소를 종속성으로 설정(현재 설치된 구성 요소를 종속성으로 설정) - Y(예);
- 실수로 레지스트리에 게시되지 않도록 이 패키지를 비공개로 표시하시겠습니까? - Y(예);
- 나머지 질문에 대해서는 기본적으로 프로그램에서 제공하는 답변을 그대로 둡니다.
이 단계는 bower.json 파일을 생성합니다.
Bootstrap 4와 그것이 의존하는 패키지(Popper 및 jQuery)를 Bower를 사용하여 프로젝트에 로드해 봅시다.
이렇게 하려면 콘솔에 다음 명령을 입력하십시오.
정자 설치 bootstrap#v4.0.0-beta --save
-save 스위치는 bower.json 파일의 종속성 섹션에 패키지 정보를 작성하는 데 필요합니다.
결과적으로 bower.json에는 다음 내용이 포함됩니다.
( "name": "bootstrap-4", "description": "Bootstrap 4 - 웹사이트에서 프로젝트 시작", "authors": [ "website" ], "license": "ISC", "keywords": , "homepage ": "", "무시": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "종속성": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )
bower init 명령으로 Bower(bower.json)를 초기화하고 패키지를 수동으로 설치하지 않으려면 bower.json 파일을 만들고(예: 파일 관리자 사용) 위의 텍스트 콘텐츠를 붙여넣기만 하면 됩니다. . 프로젝트에 종속성을 설치하려면 다음 명령을 입력하면 됩니다.
정자 설치
Gulp 프로젝트 빌더 파일(gulpfile.js)에 대한 설명
이 이전에 수행된 모든 작업은 준비 작업이었습니다. 생성된 환경이 수행할 모든 기능은 "gulpfile.js" 파일에 의해 결정됩니다.
"gulpfile.js" 파일은 작업 목록입니다.
이 파일이 수행할 주요 작업:
- 여러 스타일 파일을 하나로 모으고 결과 SCSS를 CSS로 컴파일하고 자동 접두사를 추가하고 CSS를 최소화하고 소스 맵을 만듭니다.
- 필요한 모든 js 파일을 하나로 가져오고 이 파일을 최소화하고 소스 맵을 만듭니다.
- html 파일 수집, 글꼴 전송, 그림 처리(압축) 및 Browser Sync를 통한 페이지 자동 업데이트.
또한 소스 파일을 수동으로 변경할 때 이러한 작업을 실행하지 않도록 다른 "감시" 작업을 생성해 보겠습니다. 파일 변경 사항을 모니터링하고 특정 작업을 자동으로 실행합니다.
파일 코드 "gulpfile.js"(Gulp 4를 사용하는 경우):
"엄격하게 사용"; /* 소스 파일(src), 완료된 파일(build) 및 변경 사항을 감시할 파일(watch)에 대한 경로 */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", 스타일: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", 글꼴: "assets/src/fonts/**/*.*" ), 감시: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", 글꼴: "assets/srs/fonts/* */*.* " ), 정리: "./assets/build/*" ); /* 서버 설정 */ var config = ( 서버: ( baseDir: "./assets/build" ), 알림: false ); /* gulp 및 플러그인 포함 */ var gulp = require("gulp"), // Gulp 포함 webserver = require("browser-sync"), // 페이지를 실행하고 자동으로 업데이트할 서버 plumber = require("gulp-plumber "), // 오류 추적을 위한 모듈 rigger = require("gulp-rigger"), // 한 파일의 내용을 다른 파일로 가져오기 위한 모듈 sourcemaps = require("gulp-sourcemaps"), // 맵 생성을 위한 모듈 of sass 소스 파일 = require("gulp-sass"), // SASS(SCSS)를 CSS로 컴파일하기 위한 모듈 autoprefixer = require("gulp-autoprefixer"), // autoprefix 자동 설정을 위한 모듈 cleanCSS = require("gulp- clean-css" ), // CSS 축소용 플러그인 uglify = require("gulp-uglify"), // JavaScript 캐시 축소용 플러그인 = require("gulp-cache"), // 캐싱용 플러그인 imagemin = require(" gulp-imagemin" ), // PNG, JPEG, GIF 및 SVG 이미지 압축용 플러그인 jpegrecompress = require("imagemin-jpeg-recompress"), // jpeg 압축용 플러그인 pngquant = require("imagemin-pngquant"), / / 압축용 플러그인 png rimraf = require("gulp-rimraf"), // 파일 및 디렉토리 삭제용 플러그인 rename = require("gulp-rename"); /* 작업 */ // 서버 시작 gulp.task("webserver", function () ( webserver(config); )); // html 빌드 gulp.task("html:build", function () ( return gulp.src(path.src.html) // 지정된 경로의 모든 html 파일 선택 pipe(plumber()) // 오류 추적 . pipe(rigger()) // import attachments. pipe(gulp.dest(path.build.html)) // 완료된 파일 업로드 pipe(webserver.reload(( stream: true ))); // 서버 재시작 ) ) ; // 스타일 수집 gulp.task("css:build", function () ( return gulp.src(path.src.style) // 오류를 추적하기 위해 main.scss .pipe(plumber()) 가져오기.pipe( sourcemaps.init()) // 소스맵 초기화 .pipe(sass()) // scss -> css .pipe(autoprefixer()) // 접두사 추가 .pipe(gulp.dest(path.build.css)) .pipe (rename(( suffix: ".min" ))) .pipe(cleanCSS()) // CSS 축소 .pipe(sourcemaps.write(". /")) // 소스맵 작성 .pipe(gulp.dest(path.build.css)) // 빌드에 업로드 .pipe(webserver.reload(( stream: true ))); // 서버 재시작 )); / / 빌드 js gulp.task("js:build", function () ( return gulp.src(path.src.js) // main.js 파일 가져오기 .pipe(plumber()) // 오류 추적용 ( rigger()) // 지정된 모든 파일을 main.js로 가져오기 .pipe(gulp.dest(path.build.js)) .pipe(rename(( suffix: ".min" ))) .pipe(sourcemaps.init ( )) //소스맵 초기화 .pipe(uglify()) //js 축소 .pipe(sourcemaps.write("./")) //소스맵 쓰기 .pipe(gulp.dest(path.build.js)) / / 완성된 파일 넣기 pipe(webserver.reload(( stream: true ))); // 서버 재시작 )); // 글꼴 전송 gulp.task("fonts:build", function () ( return gulp.src (path.src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // 이미지 처리 gulp.task("image:build", function () ( return gulp.src(path.fonts) src.img ) // 이미지 소스 경로. pipe(cache(imagemin([ // 이미지 압축 imagemin.gifsicle(( interlaced: true )), jpegrecompress(( Progressive: true, max: 90, min: 80 )), pngquant () , imagemin.svgo(( 플러그인: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // 완료된 파일 업로드 )); // 빌드 디렉토리 삭제 gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // 캐시 지우기 gulp.task("cache:clear", function () ( cache.clearAll(); )); // 빌드 gulp.task("빌드", gulp.series("클린:빌드", gulp.parallel("html:빌드", "css:빌드", "js:빌드", "글꼴:빌드", " 이미지:빌드"))); // 파일이 변경될 때 작업 실행 gulp.task("watch", function () ( gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css , gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series(" 이미지:빌드")); gulp.watch(path.watch.fonts, gulp.series("글꼴:빌드")); )); // 기본 작업 gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));
"gulpfile.js" 파일 코드에는 주석이 포함되어 있습니다. 이들의 도움으로 이 명령어 또는 저 명령어 조각이 수행하는 작업이 설명됩니다.
Gulp에서 작업을 생성하는 것은 매우 쉽습니다:
// gulp 작업 생성(nametask는 작업의 이름임) gulp.task("nametask", function() ( // 작업이 수행해야 하는 작업... ));
꿀꺽 꿀꺽하는 작업은 매우 간단하게 구축됩니다. 대부분의 경우 작업 프레임워크는 다음과 같이 나타낼 수 있습니다.
- 소스 파일에서 데이터를 가져옵니다.
- 꿀꺽 꿀꺽 플러그인을 사용하여 원시 데이터를 처리합니다.
- 결과(파일)를 "build" 디렉토리에 저장합니다.
Gulp 3를 사용하는 경우 "gulpfile.js" 파일의 내용은 다음과 같아야 합니다.
"엄격하게 사용"; /* gulp-autoprefixer 옵션 */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "안드로이드 >= 4.4", "오페라 >= 30" ]; /* 소스 파일(src), 완료된 파일(build) 및 변경 사항을 감시할 파일(watch)에 대한 경로 */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", 스타일: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", 글꼴: "assets/src/fonts/**/*.*" ), 감시: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", 글꼴: "assets/srs/fonts/* */*.* " ), 정리: "./assets/build/*" ); /* 서버 설정 */ var config = ( 서버: ( baseDir: "./assets/build" ), 알림: false ); /* gulp 및 플러그인 포함 */ var gulp = require("gulp"), // Gulp 포함 webserver = require("browser-sync"), // 페이지를 실행하고 자동으로 업데이트할 서버 plumber = require("gulp-plumber "), // 오류 추적을 위한 모듈 rigger = require("gulp-rigger"), // 한 파일의 내용을 다른 파일로 가져오기 위한 모듈 sourcemaps = require("gulp-sourcemaps"), // 맵 생성을 위한 모듈 of sass 소스 파일 = require("gulp-sass"), // SASS(SCSS)를 CSS로 컴파일하기 위한 모듈 autoprefixer = require("gulp-autoprefixer"), // autoprefix 자동 설정을 위한 모듈 cleanCSS = require("gulp- clean-css" ), // CSS 축소용 플러그인 uglify = require("gulp-uglify"), // JavaScript 캐시 축소용 플러그인 = require("gulp-cache"), // 캐싱용 플러그인 imagemin = require(" gulp-imagemin" ), // PNG, JPEG, GIF 및 SVG 이미지 압축용 플러그인 jpegrecompress = require("imagemin-jpeg-recompress"), // jpeg 압축용 플러그인 pngquant = require("imagemin-pngquant"), / / 압축용 플러그인 png rimraf = require("gulp-rimraf"), // 파일 및 디렉토리 삭제용 플러그인 rename = require("gulp-rename"); /* 작업 */ // 서버 시작 gulp.task("webserver", function () ( webserver(config); )); // html 빌드 gulp.task("html:build", function () ( return gulp.src(path.src.html) // 지정된 경로의 모든 html 파일 선택 pipe(plumber()) // 오류 추적 . pipe(rigger()) // import attachments. pipe(gulp.dest(path.build.html)) // 완료된 파일 업로드 pipe(webserver.reload(( stream: true ))); // 서버 재시작 ) ) ; // 스타일 수집 gulp.task("css:build", function () ( return gulp.src(path.src.style) // 오류를 추적하기 위해 main.scss .pipe(plumber()) 가져오기.pipe( sourcemaps.init()) // 소스맵 초기화 .pipe(sass()) // scss -> css .pipe(autoprefixer(( // 접두사 브라우저 추가: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( suffix: ".min" ))) .pipe(cleanCSS()) // CSS 축소 .pipe(sourcemaps.write(". /")) // 소스맵 작성 .pipe(gulp.dest(path.build.css)) // 빌드에 업로드 .pipe(webserver.reload(( stream: true ))); // 서버 재시작 )); / / 빌드 js gulp.task("js:build", function () ( return gulp.src(path.src.js) // main.js 파일 가져오기 .pipe(plumber()) // 오류 추적용 ( rigger()) // 지정된 모든 파일을 main.js로 가져오기 .pipe(gulp.dest(path.build.js)) .pipe(rename(( suffix: ".min" ))) .pipe(sourcemaps.init ( )) //소스맵 초기화 .pipe(uglify()) //js 축소 .pipe(sourcemaps.write("./")) //소스맵 쓰기 .pipe(gulp.dest(path.build.js)) / / 완성된 파일 넣기 pipe(webserver.reload(( stream: true ))); // 서버 재시작 )); // 글꼴 전송 gulp.task("fonts:build", function () ( return gulp.src (path.src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // 이미지 처리 gulp.task("image:build", function () ( return gulp.src(path.fonts) src.img ) // 이미지 소스 경로. pipe(cache(imagemin([ // 이미지 압축 imagemin.gifsicle(( interlaced: true )), jpegrecompress(( Progressive: true, max: 90, min: 80 )), pngquant () , imagemin.svgo(( 플러그인: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // 완료된 파일 업로드 )); // 빌드 디렉토리 삭제 gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // 캐시 지우기 gulp.task("cache:clear", function () ( cache.clearAll(); )); // 빌드 gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // 파일이 변경될 때 작업 실행 gulp.task("watch", function () ( gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, [" css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(경로 .watch.fonts, ["글꼴:빌드"]); )); // 기본 작업 gulp.task("default", [ "build", "webserver", "watch" ]);
젠틀맨의 프론트엔드 개발자 셋
현대의 프론트 엔드 개발자가 자신의 무기고에 다음과 같은 프로젝트 빌드 도구 중 하나를 가지고 있어야 한다는 것은 비밀이 아닙니다. 꿀꺽또는 꿀꿀 거리는 소리. 얼마 전까지 Grunt는 이 문제에 대해 독점권을 가지고 있었지만 Grunt에서 분리된 개발자 그룹은 자체적으로 가볍고 빠른 Gulp 작업 관리자를 만들기로 결정했습니다.
이 기사에서는 향후 프로젝트에서 사용할 스타터 패키지를 처음부터 준비합니다.
우리는 어떤 기술을 사용합니까
- 소프트웨어 플랫폼: Node.js
- CSS 전처리기: 첨필
- 작업 관리자: 꿀꺽
프론트엔더에 작업 관리자가 필요한 이유는 무엇입니까?
최근까지 CSS 전처리기를 사용하기 전까지 레이아웃 레이아웃에 이미 능숙한 경우 작업 관리자 구성을 설정하는 데 시간을 할애해야 하는 이유가 무엇인지 궁금했습니다.
CSS 전처리기는 정말 편리하고 스타일 작성 속도를 높여주지만, 전처리기에서 작성된 코드를 일반 CSS로 컴파일하는 것은 버튼 하나로 해결할 수 있는 사소한 작업이 아닙니다. 이것은 작업 관리자가 우리를 돕는 곳입니다. 코드 변환은 버튼을 누르는 것으로 발생하지 않으며 모든 것이 귀하의 참여 없이 온라인에서 발생합니다(물론 모든 것이 올바르게 설정된 경우).
물론 작업 관리자의 작업은 전처리기 코드를 순수한 CSS로 변환하는 것과 관련된 프로세스를 훨씬 뛰어넘습니다. 프로젝트 어셈블러는 축소, 연결, 오류 코드 확인, 이미지를 스프라이트로 조합, 웹용 이미지 최적화 등도 처리합니다. 프로젝트에서 논리적으로 분리된 많은 파일을 생성하면 편리하게 하나의 디렉토리에 수집되고 이미 처리되어 브라우저에서 작업할 준비가 됩니다. 그러나 나중에 더 자세히 설명하지만 이제 준비부터 시작하겠습니다.
Node.js 설치
시스템에 node.js를 설치하고 사용하는 방법을 알고 있다면 다음 제목으로 건너뛰어도 됩니다.
설명된 모든 조치가 다음과 관련이 있음을 즉시 경고하고 싶습니다. 맥 OS X, 그러나 일반적으로 다른 유닉스시스템. 작업 관리자와 명령줄을 통한 개발 윈도우다소 어려우며 여기에서는 설명하지 않습니다. 그러나 여전히 Windows를 사용하고 있고 포기할 준비가 되지 않았다면 설치된 가상 머신을 사용하는 옵션을 제안할 수 있습니다. 우분투, 나는 일반적으로 매우 편리한 홈 시스템에서이 옵션을 사용합니다.
따라서 가장 먼저 해야 할 일은 콘솔을 통해 노드와 함께 작동하도록 시스템에 node.js 패키지를 다운로드하고 설치하는 것입니다. node.js의 공식 사이트로 이동하여 시스템에 맞는 최신 안정 버전을 다운로드합니다. 설치가 완료되면 명령줄에서 node 명령을 사용할 수 있어야 합니다. 노드가 작동하는지 확인하려면 명령줄에 명령을 입력하십시오.
설치된 node.js의 버전이 응답으로 표시되어야 합니다. 모든 것이 잘되면 계속 진행합니다.
프로젝트 디렉토리 구조
우리 프로젝트에서는 통합 버전의 구조를 사용합니다.
개발하다 - 개발 루트 디렉토리└─시작 - 프로젝트 디렉토리├─빌드 - 작업 관리자가 조립한 빌드├─자원 - 개발을 위한 모든 소스 파일(.psd 등)├─src - 개발 디렉토리│├─css - 스타일 개발 디렉토리││├─이미지 - 모든 정적 이미지││├─ 스프라이트 - 스프라이트에 수집된 이미지││├─부분적 - 사용자 지정 스타일 파일│││├─mixins.style - 커스텀 믹스인│││└─스타일 - 사용자 지정 스타일││├─벤더 - 기타 외부 스타일 파일││└─스타일 - 기본 스타일시트│├─글꼴 - 글꼴 디렉토리│├─img - 동적 이미지 카탈로그│├─js - JavaScript 개발 디렉토리││├─_*.js - js 사이드 파일││├─_main.js - 메인 커스텀 js││└─main.js - 메인 js 파일│├─.htaccess - 서버 구성│├─*.html - 페이지 마크업 파일│├─pages.html - 템플릿의 모든 페이지에 대한 링크가 포함된 파일│├─index.html - 페이지 마크업 인덱스 파일│└─포함 - 포함된 마크업 파일의 디렉토리│ └─*.html - 포함된 마크업 파일(header.html 등)├─package.json - npm 패키지 관리자 구성├─gulpfile.js - 꿀꺽 구성├─스타일러스.템플릿.콧수염 - 스프라이트 읽기용 마스크├─TODO - 할 일 목록└─.gitignore - 자식 구성
설치
콘솔에서 cd 명령을 사용하여 개발 루트 디렉토리로 이동하고 프로젝트 디렉토리 mkdir start를 생성한 후 이동합니다.
콘솔을 통해 프로젝트의 구조를 설정해 보겠습니다.
mkdir 빌드 리소스 src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts
프로젝트 구조에서 초기 파일을 생성해 보겠습니다.
터치 gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html
패키지.json 만들기
모든 팝업 질문은 Enter를 통해 클릭할 수 있으며 노드는 기본값으로 설정하거나 제안된 필드를 채웁니다.
.gitignore
무시하고 저장소에 업로드하지 않을 디렉토리를 git에 알려줍니다.
/node_modules/ /build/ /resource/
node_modules 디렉토리는 나중에 플러그인을 설치한 후 나타나며 프로젝트의 모든 노드 플러그인을 포함합니다.
src/.htaccess
서버에 대한 추가 gzip 압축 및 캐싱을 설정합니다.
AddOutputFilterByType DEFLATE 텍스트/html 텍스트/일반 텍스트/xml 텍스트/css 텍스트/자바스크립트 애플리케이션/자바스크립트
src/css/styles.style
기본 스타일 파일에 사용자 정의 스타일 파일 포함:
@import "부분/스타일"
.styl 파일을 포함하는 경우 Stylus 전처리기 코드의 의미 체계에 따라 확장자가 지정되지 않습니다. .css와 같은 다른 확장에 스타일을 포함하려면 후자가 필요합니다.
할 것
이 페이지에는 개발 할 일 목록이 포함되어 있습니다. Sublime Text용 PlainTasks 플러그인 페이지에서 이 파일 작업에 대해 자세히 알아볼 수 있습니다.
이것으로 구조물의 설치가 완료됩니다.
npm 패키지 관리자로 플러그인 설치
Node.js는 기본적으로 우리가 작업해야 하는 리포지토리에 많은 플러그인이 있는 npm 패키지 관리자를 포함합니다.
Gulp 플러그인 설치
먼저 시스템에 Gulp를 전역적으로(-g 스위치 사용) 설치해야 합니다.
npm 설치 꿀꺽 -g
이건 한 번 해봐야지, 추가 전역 설치가 필요하지 않습니다.
이제 Gulp를 프로젝트 디렉토리에 로컬로 설치해야 합니다.
npm 설치 gulp --save-dev
--save-dev 키는 플러그인에 대한 정보(저장소의 이름 및 해당 버전)가 package.json 구성에 추가되고 이 프로젝트에 대해 기억할 것임을 나타냅니다. 우리는 git에 node_modules 플러그인이 있는 무거운 폴더를 저장하지 않기 때문에 구성에 저장된 설치된 플러그인에 대한 정보를 통해 단 하나의 npm i 명령으로 필요한 모든 플러그인을 프로젝트에 배포할 수 있습니다.
각 명령에 대한 약어가 있으므로 위의 명령을 더 짧은 형식으로 작성할 수 있습니다.
앞으로는 축약된 명령 형식도 사용할 것입니다.
Gulp용 스타일러스 플러그인
우리 프로젝트에서는 훌륭하게 작동하고 노드에서 컴파일되는 Stylus 전처리기를 사용합니다.
설치하다:
npm i 꿀꺽 스타일러스 -D
CSS 처리 플러그인
자동접두사- 필수 속성에 -ms- -o- -moz- -webkit- 접두사를 자동으로 삽입합니다.
npm i gulp-autoprefixer -D
CSS 축소- 플러그인은 여분의 공백과 탭을 제거하여 출력 CSS 파일을 축소합니다.
npm i gulp-minify-css -D
이미지 처리 플러그인
이미지를 스프라이트로 결합- 더 이상 모든 이미지를 스프라이트로 병합한 다음 좌표를 계산하는 데 소중한 시간을 소비할 필요가 없습니다. 이 플러그인이 자동으로 이 모든 작업을 수행합니다.
npm i gulp.spritesmith -D
이전에 만든 stylus.template.mustache 파일에 스프라이트의 위치를 계산하기 위한 마스크를 추가합니다.
((#items)) $((name)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/항목))
mixins.styl에 커스텀 믹스를 추가합니다.
SpriteWidth($sprite) 너비 $sprite spriteHeight($sprite) 높이 $sprite spritePosition($sprite) 배경 위치 $sprite $sprite spriteImage($sprite) 배경 이미지 url($sprite) sprite($sprite) if !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)
혼합 및 생성된 파일을 기본 스타일 파일 src/css/styles.styl에 연결합니다.
@import "부분/스프라이트" @import "부분/mixins"
스프라이트 파일은 커스텀 스타일 @import "partial/styles" 전에 포함되어야 합니다.
웹용 이미지 최적화- 플러그인은 자동으로 이미지에서 불필요한 정보를 모두 잘라내어 최적의 크기로 축소합니다. 경우에 따라 이미지 크기를 최대 90%까지 줄일 수 있습니다.
npm i gulp-imagemin -D
JavaScript 처리 플러그인
JS 축소- 플러그인은 JS 코드를 최대한 축소하여 로딩 시간을 줄입니다.
npm i gulp-uglify -D
JS 버그 추적- 플러그인은 JS 코드를 철저히 검사하여 모든 불일치를 식별하고 콘솔에 표시합니다.
npm i jshint gulp-jshint -D
HTML 처리 플러그인
연결된 파일- 플러그인을 사용하면 헤더 , 바닥글 , 옆면 등과 같은 사이트의 정적 부분을 별도의 파일에 저장하고 다른 파일의 일부에 포함할 수 있습니다. 헤더가 약간 변경된 경우 템플릿의 수십 또는 수백 개의 html 페이지를 변경할 필요가 더 이상 없습니다.
npm i gulp-rigger -D
플러그인은 JS와도 호환됩니다.
구성과 함께 기본 JS 파일 src/js/main.js에 사용자 정의 JS를 포함합니다.
//= _main.js
index.html에 header.html 및 footer.html 파일 포함
//= 포함/header.html//= 포함/바닥글.html
기타 플러그인
LiveReload- 플러그인을 사용하면 변경 사항을 확인하기 위해 매번 브라우저에서 페이지를 다시 로드할 필요가 없습니다. 이제 수정된 파일을 저장할 때 이 작업이 자동으로 수행됩니다.
npm i gulp-connect -D
Gulp 충돌 방지- 때때로 Gulp가 심각한 오류(대부분 JS로 인해)의 경우 감시 모드에서 충돌이 발생할 수 있습니다. 이 플러그인은 가능할 때마다 Gulp 프로세스를 계속 실행하려고 시도합니다.
npm i 꿀꺽 배관공 -D
파일 이름 바꾸기- 파일 이름을 사용하는 가장 일반적인 작업. 플러그인을 사용하면 예를 들어 style.styl 보기 파일을 style.min.css로 가져오기 위해 파일 이름을 완전히 바꾸고, 확장자를 변경하고, 접두사와 접미사를 추가할 수 있습니다.
npm i gulp-rename -D
청소기-때로는 빌드 디렉토리를 완전히 정리해야 할 필요가 있습니다. 여기서 플러그인이 구출됩니다.
소스맵- 축소 후 브라우저 디버깅을 통해 파일을 읽을 수 있도록 하려면 축소된 파일에 소스 맵을 추가해야 합니다.
npm i gulp-sourcemaps -D
고급 시계 기능- 플러그인은 시계를 스마트하게 만듭니다. 이제 하나의 파일만 변경될 때 빌드의 모든 파일을 덮어쓰지 않고 수정된 특정 파일을 덮어쓰므로 시간과 리소스가 절약됩니다.
npm i gulp-watch -D
패키지.json 확인
모든 플러그인이 설치되었으면 package.json 을 확인하겠습니다. 다음과 같아야 합니다.
( "이름": "시작", "버전": "1.0.0", "설명": "프론트 엔드 개발을 위한 시작 팩", "저자": "이반 이바노프", "라이선스": "MIT", "종속성": (), "devDependencies": ( "gulp": "최신", "gulp-autoprefixer": "최신", "gulp-connect": "최신", "gulp-imagemin": "최신", "jshint": "최신", "jshint-stylish": "최신", "gulp-jshint": "최신", "gulp-minify-css": "최신", "gulp-plumber": "최신", "gulp-rename": "최신", "gulp-rigger": "최신", "gulp-sourcemaps": "최신", "gulp-stylus": "최신", "gulp-uglify": "최신", "gulp-watch": "최신", "gulp.spritesmith": "최신", "rimraf": "최신" ) )
귀하의 경우 최신 버전 대신 설치된 플러그인의 특정 버전이 작성됩니다. 왜냐하면 우리는 많은 프로젝트에서 사용될 스타터 패키지를 빌드하고 있기 때문에 프로젝트에 항상 최신 플러그인 버전을 설치하기 위해 버전 값을 최신으로 바꾸는 것도 권장합니다.
node_modules 디렉토리는 모든 노드 플러그인 파일이 저장된 프로젝트 폴더에도 나타나야 합니다. 필요한 모든 플러그인이 설치되었으므로 Gulp 구성 설정으로 진행할 수 있습니다.
gulpfile.js 설정
gulpfile.js- 이것은 작업 관리자의 기본 구성 파일이며 모든 설정과 명령을 저장할 것입니다.
Gulp의 모든 작업은 작업으로 귀결됩니다( 영어일). 작업은 이름이 있는 별도의 독립적인 기능입니다. 각 작업은 개별적으로 호출할 수 있습니다.
최신 표준과의 호환성 모드
먼저 파일 시작 부분에서 최신 표준에 따라서만 호환성 모드를 연결합니다.
"엄격하게 사용";
이 지침에 대해 자세히 알아볼 수 있습니다.
플러그인 초기화
플러그인은 다음 구성으로 초기화됩니다.
var initPlugin = require("플러그인 이름");
이 설계에 따라 모든 플러그인을 초기화합니다.
Var gulp = require("gulp"), //메인 플러그인 gulp stylus = require("gulp-stylus"), //전처리기 스타일러스 접두사 = require("gulp-autoprefixer"), //자동 접두사 정렬 cssmin = require(" gulp-minify-css"), //css 축소 uglify = require("gulp-uglify"), //js 축소 jshint = require("gulp-jshint"), //js 오류 추적 rigger = require("gulp - rigger"), //html 및 js 작업에는 imagemin = require("gulp-imagemin"), //이미지 최소화 spritesmith = require("gulp.spritesmith"), //이미지를 스프라이트로 결합 rimraf = require( "rimraf "), //purge sourcemaps = require("gulp-sourcemaps"), //sourcemaps rename = require("gulp-rename"), //파일 이름 바꾸기 plumber = require("gulp-plumber"), // 융합 gulp 중지 watch = require("gulp-watch"), //시계 확장 connect = require("gulp-connect"); //실시간 로드
경로 상수
편의를 위해 모든 경로와 마스크를 즉시 정의합니다.
Var path = ( build: ( //여기서 빌드 후 파일을 준비할 위치를 지정합니다. html: "build/", js: "build/js/", css: "build/css/", img: " build/css/ images/", fonts: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css /partial/" ), src: ( //html 소스를 가져오는 경로: "src/template/*.html", //src/template/*.html 구문은 gulp가 . html 확장자 js: "src/ js/[^_]*.js",//스타일과 스크립트에서는 기본 파일만 필요합니다. jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //라이브러리 파일을 별도로 저장하려면 img 행의 주석 처리를 제거하십시오: "src/css/images/**/*.*", //구문 img/**/*.* 의미 - 폴더 및 하위 디렉토리에서 모든 확장자의 모든 파일 가져오기 글꼴: "src/fonts/**/*.*", contentImg: "src/img/**/* .*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //여기서 변경 사항을 감시할 파일을 지정합니다. html: "src/template /**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/** /*.*", contentImg: "src/ img/**/*.*", 글꼴: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src/ css/sprites/*.png" ), clean : "./build", //지울 수 있는 디렉터리 outputDir: "./build" //미니서버를 시작할 초기 루트 디렉터리 );
이름 마스크를 사용할 수 있습니다.
- *.js- js 확장자를 가진 모든 파일
- [^_]*.js- 밑줄로 시작하는 파일을 제외한 확장자가 js인 모든 파일
- *.* - 현재 디렉토리 내의 모든 확장자를 가진 모든 파일
- /**/*.html- 현재 디렉토리 및 모든 하위 디렉토리 내의 .html 확장자를 가진 모든 파일
작업 (작업)
이제 모든 상수가 작성되었으므로 작업 작성을 시작할 수 있습니다. 모든 작업의 구조는 다음과 같습니다.
Gulp.task("taskName", function()( //일부 함수 ));
미니 서버 및 LiveReload
먼저 로컬 서버와 LiveReload를 설정합니다.
// 개발용 로컬 서버 gulp.task("connect", function()( connect.server(( //서버 구성 설정 root: , //서버 시작 루트 디렉터리 포트: 9999, //livereload를 사용할 포트 : true //LiveReload 작업 초기화 )); ));
대부분 한 번에 여러 프로젝트에서 동시에 작업해야 하는 경우가 많습니다. 서버를 사용하면 여러 서버를 동시에 실행할 수 있으므로 다른 프로젝트에 포트를 등록하는 것으로 충분합니다.
HTML 빌드
// HTML 빌드 작업 gulp.task("html:build", function () ( gulp.src(path.src.html) //필요한 경로에서 파일 선택.pipe(rigger()) //리거를 통해 실행 . pipe(gulp.dest(path.build.html)) //빌드 폴더에 업로드 .pipe(connect.reload()) //업데이트를 위해 서버를 다시 시작));JS 빌드
// js에서 오류를 확인하고 콘솔에 출력 gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //필요한 경로에서 파일 선택.pipe(jshint( )) //jshint를 통해 실행 .pipe(jshint.reporter("jshint-stylish")); //콘솔에 대한 스타일 오류 출력 )); // javascript 빌드 gulp.task("js:build", function () ( gulp.src(path.src.js) //메인 파일 찾기.pipe(rigger()) //리거를 통해 실행 .pipe(sourcemaps .init()) //소스 맵 초기화 .pipe(uglify()) //JS 압축 .pipe(sourcemaps.write()) //map 쓰기.pipe(rename((suffix: ".min"))) / /출력에 suffix.min 추가 file.pipe(gulp.dest(path.build.js)) //완성된 파일을 빌드에 업로드 .pipe(connect.reload()) //그리고 서버 재시작 ));스프라이트 빌드
스프라이트화할 모든 이미지는 src/css/sprites/ 디렉토리에 추가되고 Gulp를 통해 실행된 후 단일 스프라이트 이미지가 됩니다. 스프라이트에는 명확한 치수가 없는 로고와 배경이 포함되어서는 안 됩니다.
// 빌드 스프라이트 gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) // 이미지를 sprite로 병합할 위치를 선택합니다.pipe(spritesmith(( imgName : " sprite.png", //스프라이트 이미지의 이름 cssName: "sprite.styl", //스프라이트에서 이미지 위치를 저장하는 스타일 이름 imgPath: "images/sprite.png", //스프라이트가 있는 경로 거짓말 cssFormat: "stylus", //위치를 처리하는 형식 cssTemplate: "stylus.template.mustache", //마스크 파일 cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name // 각 스프라이트의 이름은 파일 이름과 이름 시작 부분에 "s-" 구조로 구성됩니다 ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites)); // path where 이미지를 저장합니다 spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // 스타일을 저장하는 경로 ));
스프라이트를 표시하려면 믹스인을 사용하면 됩니다. 예를 들어 lorem.png 파일의 경우 스프라이트에서 선택한 항목은 다음과 같습니다.
로렘 스프라이트($s-lorem)
이제 .lorem 개체는 이미지의 크기와 이미지 자체를 배경으로 사용합니다.
정적 이미지 빌드
정적 이미지는 레이아웃 템플릿에서 사용되는 이미지입니다.
// 정적 이미지 빌드 gulp.task("image:build", function () ( gulp.src(path.src.img) //이미지를 선택합니다. pipe(imagemin(( //Compress them Progressive: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //0에서 7까지의 압축 수준 ))) .pipe(gulp.dest(path. build.img)) //빌드에 업로드 .pipe(connect.reload()) //서버 재시작 ));
동적 이미지 구축
동적 이미지는 사이트에서 변경되는 콘텐츠 이미지이며 데모용으로만 템플릿 수준에 포함됩니다. 예를 들어 뉴스 등의 이미지가 될 수 있습니다.
// 동적 이미지를 빌드합니다. [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //0에서 7까지의 압축 비율 ))) .pipe(gulp.dest(path.build.contentImg)) //빌드하기 위해 언로드 .pipe(connect.reload()) //서버 재시작 ));
CSS 구축
// 커스텀 css 빌드 gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //메인 스타일시트 선택 pipe(sourcemaps.init()) //soucemap 초기화 . pipe (stylus(( compress: true, "include css": true ))) // 스타일러스 컴파일 .pipe(prefixer(( browser: ["last 3 version", "> 1%", "ie 8", "ie 7 "] ))) //공급업체 접두어 추가.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //소스 맵 쓰기 .pipe(rename((suffix: ".min"))) / / 출력에 suffix.min 추가 filename.pipe(gulp.dest(path.build.css)) //빌드로 언로드 .pipe(connect.reload()) //서버 다시 시작 ));외부 스타일에 대한 별도의 작업:
// 벤더 css 빌드 gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // 벤더 폴더 가져오기 .pipe(sourcemaps.init()) //소스맵 초기화 .pipe( cssmin()) //Compress.pipe(sourcemaps.write()) //소스맵 쓰기 .pipe(gulp.dest(path.build.css)) //빌드에 업로드 .pipe(connect.reload() ) // 서버 재시작));
일반 CSS 빌드에 대한 작업도 추가해 보겠습니다.
// 전체 css 빌드 gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);
홈 스타일과 별도로 외부 스타일을 처리하고 별도의 파일로 업로드하려면 "cssVendor:build" 행의 주석을 제거해야 합니다.
글꼴 빌드
// 글꼴 빌드 gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //빌드할 덤프 ));Build.htaccess
// htaccess 빌드 gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess) .pipe(gulp.dest(path.build.htaccess)) //빌드에 업로드 ));일반 빌드
각 부분을 별도로 빌드할 필요가 없도록 일반 빌드에 대한 작업을 작성해 보겠습니다.
// 모든 빌드 gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:빌드", "이미지:빌드", "이미지 콘텐츠:빌드" ]);
빌드 정리
빌드 디렉터리를 완전히 정리해야 하는 경우가 있습니다. 여기에서 다음 작업이 도움이 될 것입니다.
// 빌드 폴더 정리 gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));
실시간으로 변경 사항 확인 또는 추적
Gulp의 가장 중요하고 유용한 기능 중 하나는 생성된 파일의 모든 변경 사항을 실시간으로 모니터링하고 이에 따라 특정 작업을 수행할 수 있는 감시 기능입니다.
// 시계 gulp.task("watch", function()( // 변경 시 html 빌드 watch(, function(event, cb) ( gulp.start("html:build"); )); //빌드 변경 시 스프라이트 watch(, function(event, cb) ( gulp.start("sprites:build"); )); //변경 시 컨텍스트 이미지 빌드 watch(, function(event, cb) ( gulp.start("sprites:build"); )); start(" imagescontent:build"); )); //변경된 경우 css 빌드 watch(, function(event, cb) ( gulp.start("css:build"); )); //경우에 따라 js 확인 of change watch(, ["jshint"]); //변경시 js 빌드 watch(, function(event, cb) ( gulp.start("js:build"); )); // 정적 이미지 빌드 변경의 경우 watch(, function(event, cb) ( gulp.start("image:build"); )); //변경의 경우 글꼴 빌드 watch(, function(event, cb) ( gulp.start(" fonts:build"); )) ; // 변경 시 htaccess 빌드 watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));
기본 작업
기본 작업은 콘솔에 gulp 명령을 입력할 때 작업 관리자가 수행하는 작업입니다.
// 기본 동작 gulp.task("default", ["build", "watch", "connect"]);
우리의 경우 기본적으로 프로젝트를 빌드하고 감시 모드를 활성화하고 서버를 시작합니다.
명령줄에 대한 명령
명령줄에 대한 모든 galp 명령은 두 부분으로 구성됩니다. gulp 명령 자체와 공백으로 구분된 작업 이름입니다. 다음은 구성에 적용할 수 있는 명령 목록입니다.
- gulp - 기본 명령, 기본 작업 실행
- 꿀꺽 빌드 - 모든 빌드
- 꿀꺽 시계 - 시계 시작
- gulp clean - 클린 빌드 디렉토리
- gulp connect - 서버 시작
- gulp html:build - HTML 빌드
- gulp jshint:build - JS에서 오류 확인
- gulp js:build - JS 빌드
- gulp sprites:build - 스프라이트 빌드
- gulp image:build - 정적 이미지 빌드
- gulp imagecontent:build - 동적 이미지 빌드
- gulp cssOwn:build - 커스텀 CSS 빌드
- gulp cssVendor:build - 외부 CSS 빌드
- gulp css:build - 일반 CSS 빌드
- gulp 글꼴:빌드 - 글꼴 빌드
- gulp htaccess:빌드 - build.htaccess
이 시점에서 gulpfile.js의 구성이 완료되었습니다.
스타터 패키지를 프로젝트에 복사
먼저 cd development/example과 같이 개발 중인 폴더의 콘솔을 살펴보고 start 패키지 디렉토리의 모든 항목을 프로젝트 cp -a ~/develop/start/로 복사합니다. ~/개발/예제/
이 복사 방법이 가장 편리하기 때문입니다. 숨겨진 .gitignore 파일 등을 포함하여 모든 것을 정확하게 복사합니다.
결론
이 가이드를 사용하여 Front-end 개발을 위한 프로젝트에서 Gulp를 사용하기 위한 스타터 패키지를 준비했습니다.
이 패키지는 GitHub에서도 사용할 수 있습니다.
포스트 스크립텀
이 문서는 최종 문서가 아니며 변경 및 개선 사항에 따라 업데이트됩니다.