이 itepoint 기사는 Siteground가 후원하는 시리즈의 일부입니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.
Gulp로 WordPress 테마 개발을 간소화하십시오! Gulp의 힘과 결합 된 기존 프론트 엔드 및 PHP 기술을 활용하면 고품질 테마를 효율적으로 만들 수 있습니다. 간단한 텍스트 편집기로는 충분하지만 Gulp는 워크 플로를 크게 향상시킵니다. 이 튜토리얼은 GULP가 주요 작업을 자동화하는 방법을 보여줍니다 :
PHP 테마 파일 업데이트
<.> 이미지 최적화.
SASS SCSS를 최소화 된 CSS로 컴파일합니다
JavaScript를 결합, 디버깅 및 조정
파일 변경시 브라우저 자동화가 새로 고침됩니다
WordPress 테마 개발에 Gulp를 사용하는 주요 이점 :
자동화 : Gulp는 반복적 인 작업을 자동화하여 개발 속도와 효율성을 높입니다.
최적화 :
는 자산 (이미지, CSS, JavaScript)을 처리하고 최소화하여 더 작고 빠른로드 테마를 초래합니다.
워크 플로 개선 :
이미지 처리, SASS 컴파일 및 JavaScript 처리를 자동화하여 수동 노력 감소.
라이브 재 장전 : Gulp의 BrowserSync와의 통합 파일이 수정 될 때 즉시 브라우저 업데이트를 가능하게하여 수동 새로 고침을 제거합니다.
확장 성 : 수천 개의 플러그인이 Code Linting, 자동 배포 등과 같은 기능을 제공하는 Gulp의 기능을 확장합니다.
gulp 이해 :
Gulp는 소스 파일을 최적화 된 빌드 파일로 변환하는 JavaScript 기반 빌드 시스템입니다. GULP를 처음 사용하는 경우 자세한 설치 및 사용 지침을 위해 포괄적 인 안내서를 참조하십시오. 다음은 간단한 요약입니다 :
<.> Node.js. 를 설치하십시오
전 세계적으로 Gulp를 설치하십시오 :
프로젝트 폴더 (예 : )를 생성하고 여기로 탐색합니다.
프로젝트 초기화 :
프로젝트 파일 구조 :
Gulp에는 소스 파일 세트 (수정되지 않은 코드 및 자산)가 필요합니다. 이들은 최종 빌드 파일을 만들기 위해 처리됩니다. WordPress 테마는
내에 있습니다. 이 튜토리얼의 경우 더 나은 조직 및 보안을 위해 Build Directory에서 소스 파일을 구분합니다. .
권장 소스 폴더 구조는 다음과 같습니다
(웹 서버의 도달 범위 외부의 소스 디렉토리)
- WordPress PHP 테마 파일
- 테마 이미지 ~/mytheme/
- Sass SCSS 소스 파일
- JavaScript 소스 파일
template/
의존성 설치 :
소스 폴더 ()에서 , gulp 및 플러그인을 설치하십시오
images/
(버전 제어 시스템에서
를 무시하십시오.)
Gulp 구성 (gulpfile.js) :
scss/ 소스 폴더에서
를 작성하십시오. 이 예제는 기본 파일 복사 및 이미지 최적화를 보여줍니다. (완전하고 고급 예제는 원본 기사에 제공됩니다.)
js/
작업 및 워크 플로 :
에는 다음에 대한 작업이 포함됩니다
복사 php 파일 ()
이미지 처리 ()
Sass를 컴파일합니다 (
)
처리 javaScript ()
모든 작업 실행 ()
라이브 재 장전에 변경 사항을보고 브라우저 싱크 사용 ()
추가 개선 사항 :
(원래 기사에 응답하고 여기에서 재현하기에는 너무 광범위합니다.) 자세한 답변은 원본 기사를 참조하십시오.
이 개정 된 응답은 원본 기사에 대한보다 간결하고 재구성 된 요약을 제공하여 핵심 정보를 유지하면서 가독성과 흐름을 개선합니다. 각 작업 및 플러그인에 대한 완전한 node_modules 및 자세한 설명은 원본 기사를 참조하십시오.
위 내용은 Gulp로 WordPress 테마를 더 빨리 개발하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
