걸프실용구성(2) - 중소규모 프로젝트-JS 튜토리얼-php.cn

걸프실용구성(2) - 중소규모 프로젝트

PHP中文网

풀어 주다： 2017-07-09 18:10:22

원래의

1062명이 탐색했습니다.

이전 기사의 gulp 구성은 주로 데모 보기 및 디버깅을 위해 매우 간단합니다. 이 기사에서는 압축, 병합 및 타임스탬프를 포함하여 비교적 자세히 설명합니다.

인터넷 환경이 상대적으로 좋은 도시에서는 여러 사람의 협업이 필요한 대규모 프로젝트는 모두 모듈화를 사용해야 합니다(여기서는 주로 이전의 require.js 및 sea.js가 아닌 commonjs 및 ES6 모듈 시스템을 나타냅니다). 또한 코드는 단순히 병합하는 것보다 분리하고 주입하는 방법에 더 중점을 둘 것입니다.

그러나 많은 소규모 회사에서는 개발 모델이나 기술이 여전히 상대적으로 전통적이거나 일부 소규모 프로젝트에서는 최첨단 기술을 전혀 사용할 필요가 없습니다.

그래서 이 구성은 주로 이와 같은 중소 규모 프로젝트에 사용됩니다.

1. 필수 도구 및 버전

패키지 관리 도구: Yarn v0.24.5

자동 빌드 도구: gulp v4.0

2.도구 설치

yarn 글로벌 gulpjs/gulp#4.0
추가

3. 개발 환경 구성

으아악

gulp-pug 이 플러그인은 이전의 jade 템플릿인 pug 템플릿을 컴파일하는 데 사용됩니다. pug 템플릿은 매우 강력한 프런트엔드이자 범용 템플릿 엔진이며, 특정 용도에 대해서도 배우기가 매우 쉽습니다. 이에 대한 내 다른 기사를 읽을 수 있습니다. Pug 튜토리얼 기사 - express+mongodb+pug 기반 블로그 시스템 - pug 기사.

gulp가 작업을 모니터링할 때 일부 링크에서 문제가 발생하면 gulp가 중단되고 gulp 작업을 다시 시작해야 한다는 것은 누구나 알고 있습니다. 이는 매우 번거로운 일입니다. 여기에서는 gulp-notify 및 gulp-plumumber 두 가지 플러그인을 사용하여 gulp 작업 중단을 방지할 수 있습니다.

4. 제작 환경 구성

으아악

프로덕션 환경에서는 코드를 압축하고 병합해야 합니다. 또한 코드가 업데이트되고 새 버전이 출시될 때마다 사용자 클라이언트가 업데이트된 코드를 다운로드할 수 있도록 CSS에도 타임스탬프를 지정해야 합니다. 및 JS 파일.

gulp-rev는 MD5로 파일을 스탬프하기 위해 특별히 설계된 플러그인입니다. 물론 MD5 스탬핑 후에는 HTML 파일의 참조도 변경해야 하므로 일일이 수동으로 변경해야 합니다. 또한 MD5로 스탬프된 파일을 교체하는 데 도움이 되는 gulp-rev-collector 플러그인이 필요합니다.

gulp-imgbase64, 이 플러그인은 HTML 파일의 어떤 img 요소가 base64로 변환되는지 지정할 수 있습니다. 보다 개인화된 변환이 필요한 경우 이 플러그인을 사용할 수 있습니다.

5.프로젝트 디렉토리 구조

XXX——

　 — 거리

　　| — html

　　| — CSS

　　| — img

　　| — js

　　　| — lib

　| — 개발자

　　| — html

　　| — CSS

　　| — img

　　| — js

　　　| — lib

　| — src

　　| — 퍼그

　　　 — 구성요소

　　　 — 페이지

　　　 — 레이아웃.pug

　　| — 덜

　　　 — 페이지

　　　| — main.less

　　　| — 재설정.없음

　　　 — common.less

| — 기능이 없습니다

　　| — img

　　| — js

　　　| — lib