>安裝插件：

1. >create

   目錄：

   npm install es6-promise --save-dev

   >使用您的
> file（包括WordPress stylesheet標(biāo)題和目錄）創(chuàng)建a
2. 目錄。

   > sass sassstyle.scss（SASS任務(wù)）：

此任務(wù)編譯了SASS，添加供應(yīng)商前綴，并且可選地生成RTL樣式表。

3. gulpfile.js文件觀看：

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

>添加手表任務(wù)以自動(dòng)重新運(yùn)行

的錯(cuò)誤處理：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('./'));
});

和用于改進(jìn)錯(cuò)誤處理： gulp-plumber 更新您的

gulp-plumber 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

>安裝插件：

1. 創(chuàng)建：在主題root中創(chuàng)建一個(gè)文件以配置jshint。

   const plumber = require('gulp-plumber');
   const gutil = require('gulp-util');
   
   const onError = (err) => {
     console.error('An error occurred:', gutil.colors.magenta(err.message));
     gutil.beep();
     this.emit('end');
   };
   
   gulp.task('sass', () => {
     return gulp.src('./sass/*.scss')
       .pipe(plumber({ errorHandler: onError }))
       .pipe(sass())
       // ... rest of your sass task
   });

2. >（JS任務(wù)）：.jshintrc此任務(wù)串聯(lián)，絨毛和簡化JavaScript文件。 .jshintrc記住在您的

   中加入
。

3. gulpfile.js圖像優(yōu)化：

   npm install gulp-concat gulp-jshint gulp-uglify --save-dev

   app.min.js functions.php安裝插件：

創(chuàng)建
1. 和

   文件夾。

   const concat = require('gulp-concat');
   const jshint = require('gulp-jshint');
   const uglify = require('gulp-uglify');
   
   gulp.task('js', () => {
     return gulp.src('./js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'))
       .pipe(concat('app.js'))
       .pipe(rename({ suffix: '.min' }))
       .pipe(uglify())
       .pipe(gulp.dest('./js'));
   });

2. >（圖像任務(wù)）：

   此任務(wù)優(yōu)化了圖像。 /images/src>更新您的/images/dist和

   >任務(wù)以包括
>任務(wù)。
3. >

   實(shí)時(shí)重新加載的gulpfile.js browsersync：

   npm install gulp-imagemin --save-dev

   >

   watch default images安裝插件：

（browsersync Integration）：

1. const imagemin = require('gulp-imagemin');
   
   gulp.task('images', () => {
     return gulp.src('./images/src/*')
       .pipe(plumber({ errorHandler: onError }))
       .pipe(imagemin({ optimizationLevel: 7, progressive: true }))
       .pipe(gulp.dest('./images/dist'));
   });

   記住將
替換為本地WordPress開發(fā)URL。
2. 該增強(qiáng)指南提供了一種更全面和結(jié)構(gòu)化的方法，可以將吞吐物集成到您的WordPress主題開發(fā)工作流程中。 切記為高級配置選項(xiàng)咨詢每個(gè)Gulp插件的文檔。

   >