WordPress主題自動化與Gulp

用Gulp的自動化功率簡化您的WordPress主題開發！ 本教程演示瞭如何將吞噬整合到您的工作流程中以使重複任務自動化並提高效率。

>

關鍵好處：

>

• 增強的效率： gulp自動化乏味的過程，使您專注於核心開發。資產降低改善了站點性能。
• > 先決條件：確保您有wordpress，node.js，npm和基本命令行熟悉度之前。
>
• Gulp的角色： Gulp處理SASS彙編，CSS縮小，圖像優化和瀏覽器重新加載，顯著加速了開發。
• >插件可擴展性：利用gulp-sass，gulp-autoprefixer和gulp-rtlcss的毛線插件來擴展功能。
>
• 實時反饋和魯棒錯誤處理： gulp的手錶功能提供實時更新。 防止錯誤停止過程。 gulp-plumber>

為什麼要自動化？ 自動化工作流提供了很大的優勢：

>消除重複任務：

用自定義的工具替換平凡的瑣事。
• 節省時間：
將精力集中在關鍵發展方面。
• 優化性能：
縮小和資產優化增強了網站速度。
基本工具：

wordpress（本地安裝）

> node.js和npm（已安裝）
>基本命令行技能
• 介紹Gulp

> sass文件保存觸發器sass彙編並縮小CSS輸出。

>

新的圖像添加觸發了優化和遷移到專用文件夾。

php或sass文件保存觸發自動瀏覽器重新加載。
GULP設置

全局安裝：

打開命令行，並使用NPM在全球範圍內安裝GULP：

1. >用

   驗證安裝。 您應該看到Gulp版本。

   <code class="language-bash">npm install gulp -g</code>

   >主題設置（使用下劃線）：gulp -v>從underscores.me下載下劃線，創建一個主題（例如，“ gulp-wordpress”），將其放置在WordPress主題目錄中，並激活它。 >

2. 本地Gulp安裝：使用命令行（例如，）導航到主題目錄。 初始化npm：

   <code class="language-bash">npm install gulp -g</code>

   按照提示創建package.json。然後在本地安裝Gulp：

   <code class="language-bash">npm init</code>

3. ES6 Promise支持： es6-promise

   <code class="language-bash">npm install gulp --save-dev</code>

>
4. 創建

   ：在主題的root目錄中創建一個空文件。 gulpfile.js gulpfile.js

通過GULP任務加速開發

CSS（SASS）工作流程：

>安裝插件：

1. >create

   目錄：

   <code class="language-bash">npm install es6-promise --save-dev</code>

   >使用您的
> file（包括WordPress stylesheet標題和目錄）創建a
2. 目錄。

   > sass sassstyle.scss（SASS任務）：

此任務編譯了SASS，添加供應商前綴，並且可選地生成RTL樣式表。

3. gulpfile.js文件觀看：

   <code class="language-bash">npm install gulp-sass gulp-autoprefixer gulp-rtlcss gulp-rename --save-dev</code>

>添加手錶任務以自動重新運行

>當SASS文件更改時：

>

的錯誤處理：sass

>

<code class="language-javascript">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('./'));
});</code>

安裝

和用於改進錯誤處理： gulp-plumber 更新您的

任務：

gulp-plumber gulp-util

> javascript工作流：

<code class="language-javascript">gulp.task('watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('sass', 'watch'));</code>

sass

<code class="language-bash">npm install gulp-plumber gulp-util --save-dev</code>

>安裝插件：

1. 創建：在主題root中創建一個文件以配置jshint。

   <code class="language-javascript">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
   });</code>

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

   中加入
。

3. gulpfile.js圖像優化：

   <code class="language-bash">npm install gulp-concat gulp-jshint gulp-uglify --save-dev</code>

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

創建圖像文件夾：

創建
1. 和

   文件夾。

   <code class="language-javascript">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'));
   });</code>

2. >（圖像任務）：

   此任務優化了圖像。 /images/src>更新您的/images/dist和

   >任務以包括
>任務。
3. >

   實時重新加載的gulpfile.js browsersync：

   <code class="language-bash">npm install gulp-imagemin --save-dev</code>

   >

   watch default images安裝插件：

（browsersync Integration）：

1. <code class="language-javascript">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'));
   });</code>

   記住將
替換為本地WordPress開發URL。
2. 該增強指南提供了一種更全面，結構化的方法，可以將吞吐物集成到您的WordPress主題開發工作流程中。 切記為高級配置選項諮詢每個Gulp插件的文檔。

   >

以上是WordPress主題自動化與Gulp的詳細內容。更多資訊請關注PHP中文網其他相關文章！