Gulp를 사용한 WordPress 테마 자동화

Gulp의 자동화 전력으로 WordPress 테마 개발을 간소화하십시오! 이 튜토리얼은 Gulp를 워크 플로에 통합하여 반복적 인 작업을 자동화하고 효율성을 높이는 방법을 보여줍니다.

주요 혜택 :

강화 효율성 : Gulp는 지루한 프로세스를 자동화하여 핵심 개발에 집중할 수 있습니다. 자산 미니는 현장 성능을 향상시킵니다. 전제 조건 : 시작하기 전에 WordPress, Node.js, NPM 및 기본 명령 줄 친숙 함이 있는지 확인하십시오. Gulp의 역할 : Gulp는 Sass 컴파일, CSS 미니 화, 이미지 최적화 및 브라우저 재 장전을 처리하여 개발을 크게 가속화합니다.

플러그인 확장 가능성 : , 와 같은 Gulp 플러그인을 활용하여 기능을 확장합니다. 실시간 피드백 및 강력한 오류 처리 :

GULP의 시계 기능은 실시간 업데이트를 제공합니다. 는 오류가 프로세스를 중단하는 것을 방지합니다 왜 자동화?

워크 플로를 자동화하면 가 큰 이점이 있습니다

반복적 인 작업을 제거합니다. 평범한 집안일을 맞춤형 도구로 대체하십시오 시간을 절약합니다 : 에너지를 중요한 개발 측면에 집중하십시오 성과 최적화 : 미니 화 및 자산 최적화는 웹 사이트 속도를 향상시킵니다

필수 도구 :

WordPress (로컬로 설치) node.js 및 npm (installed) 기본 명령 줄 기술

소개 gulp

Gulp는 CSS 압축, SASS 컴파일, 이미지 최적화 및 브라우저 새로 고침과 같은 시간 소모적 작업을 자동화하는 JavaScript 작업 러너입니다. 이벤트에 따라 작업을 유발합니다 SASS 파일 저장 트리거 SASS 컴파일 및 조정 된 CSS 출력. 새로운 이미지 추가 트리거 최적화 및 전용 폴더로의 재배치. PHP 또는 SASS 파일은 트리거 자동 브라우저 재 장전을 저장합니다 gulp 설정 gulp-sass gulp-autoprefixer gulp-rtlcss 글로벌 설치 : 명령 줄을 열고 NPM을 사용하여 전 세계적으로 Gulp를 설치하십시오.

로 설치를 확인하십시오. Gulp 버전이 표시됩니다. gulp-plumber 테마 설정 (밑줄 사용) :

밑줄 다운로드 밑줄에서 밑줄 다운로드, 테마를 만들고 (예 : "Gulp-WordPress") WordPress 테마 디렉토리에 배치하고 활성화하십시오. >

로컬 Gulp 설치 : 명령 줄을 사용하여 테마 디렉토리로 이동하십시오 (예 : ). NPM을 초기화하십시오 :

npm install gulp -g

프롬프트를 따르십시오. 그런 다음 Gulp를 로컬로 설치하십시오 :

package.json

es6 Promise 지원 : 를 설치하십시오

npm init

작성

: 테마의 루트 디렉토리에 빈 파일을 만듭니다. es6-promise

npm install gulp --save-dev

gulp 작업으로 개발 가속화

CSS (SASS) 워크 플로 :

gulpfile.js 플러그인 설치 : gulpfile.js

작성 디렉토리 만들기 : 파일 (WordPress 스타일 시트 헤더 및 목차 포함)을 사용하여 디렉토리를 만듭니다.

(Sass Task) : 이 작업은 SASS를 컴파일하고 공급 업체 접두사를 추가하며 선택적으로 RTL 스타일 시트를 생성합니다.

파일 시청 : SASS 파일이 변경 될 때

작업을 자동으로 다시 실행하기 위해 시계 작업을 추가하십시오.

1. 로 오류 처리 : 개선 된 오류 처리를 위해 및 를 설치하십시오

npm install es6-promise --save-dev

작업을 업데이트하십시오 JavaScript Workflow :

플러그인 설치 : sass sass style.scss create : jshint를 구성하기 위해 테마 루트에서

파일을 만듭니다.

(js task) : 이 작업은 JavaScript 파일을 연결하고, 선을 조정하고 미니어링합니다. gulpfile.js 에서

를 queue하는 것을 잊지 마십시오

npm install gulp-sass gulp-autoprefixer gulp-rtlcss gulp-rename --save-dev

이미지 최적화 :

플러그인 설치 :

sass 이미지 폴더 생성 :

생성 및

require('es6-promise').polyfill();
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rtlcss = require('gulp-rtlcss');
const rename = require('gulp-rename');

gulp.task('sass', () => {
  return gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./'))
    .pipe(rtlcss())
    .pipe(rename({ basename: 'rtl' }))
    .pipe(gulp.dest('./'));
});

(이미지 작업) : 이 작업은 이미지를 최적화합니다 gulp-plumber 작업을 포함시키기 위해

및 작업을 업데이트하십시오.

gulp-plumber 실시간 재 장전을위한 BrowserSync : gulp-util

플러그인 설치 :

gulp.task('watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('sass', 'watch'));

sass

npm install gulp-plumber gulp-util --save-dev

(BrowserSync Integration) :

1. 를 로컬 워드 프레스 개발 URL로 바꾸는 것을 잊지 마십시오. 이 강화 된 가이드는 Gulp를 WordPress 테마 개발 워크 플로에 통합하기위한보다 포괄적이고 구조화 된 접근 방식을 제공합니다. 고급 구성 옵션에 대한 각 Gulp 플러그인의 설명서를 참조하십시오.

위 내용은 Gulp를 사용한 WordPress 테마 자동화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!