Gulp로 WordPress 테마를 더 빨리 개발하십시오

이 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 () 모든 작업 실행 () 라이브 재 장전에 변경 사항을보고 브라우저 싱크 사용 () 추가 개선 사항 :

gulp 플러그인을 탐색하여 다음에 대한 작업을 추가하십시오

PHP 및 JavaScript Linting ~/mytheme/ 캐시 파열 자동 배포

<code class="language-bash">npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets</code>

자주 묻는 질문 (FAQS) :

(원래 기사에 응답하고 여기에서 재현하기에는 너무 광범위합니다.) 자세한 답변은 원본 기사를 참조하십시오. 이 개정 된 응답은 원본 기사에 대한보다 간결하고 재구성 된 요약을 제공하여 핵심 정보를 유지하면서 가독성과 흐름을 개선합니다. 각 작업 및 플러그인에 대한 완전한 node_modules 및 자세한 설명은 원본 기사를 참조하십시오.

위 내용은 Gulp로 WordPress 테마를 더 빨리 개발하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!