WordPress -Thema Automatisierung mit Schluck

optimieren Sie Ihre WordPress -Themenentwicklung mit der Automatisierungskraft von Gulp! Dieses Tutorial zeigt, wie Sie Gulp in Ihren Workflow integrieren, um sich wiederholende Aufgaben zu automatisieren und die Effizienz zu steigern.

Schlüsselvorteile:

• Verbesserte Effizienz: Gulp automatisiert mühsame Prozesse und befreien Sie, sich auf die Kernentwicklung zu konzentrieren. Asset Minification verbessert die Standortleistung.
• Voraussetzungen: Stellen Sie sicher
• Gulps Rolle: Gulp verarbeitet die SASS -Kompilierung, die CSS -Minifikation, die Bildoptimierung und das Nachladen von Browser, die Entwicklung der Entwicklung signifikant beschleunigt.
• Plugin -Erweiterbarkeit: Gulp -Plugins wie , gulp-sass und gulp-autoprefixer, um die Funktionalität zu erweitern. gulp-rtlcss
• Echtzeit-Feedback und robuste Fehlerbehandlung: Die Uhrenfunktionalität von Gulp bietet Echtzeit-Updates. verhindert, dass Fehler den Prozess anhalten. gulp-plumber

Warum automatisieren?

Automatisieren Ihres Workflows bietet erhebliche Vorteile:

eliminiert sich wiederholende Aufgaben:
• Ersetzen Sie die weltlichen Aufgaben durch individuelle Werkzeuge.
spart Zeit:
• Fokus Ihre Energie auf kritische Entwicklungsaspekte.
Optimiert die Leistung:
• Minifikation und Asset -Optimierung Verbesserung der Website -Geschwindigkeit.

Essentielle Werkzeuge:

WordPress (lokal installiert)

• node.js und npm (installiert)
• grundlegende Befehlszeilenfähigkeiten

Einführung von Gulp

Gulp ist ein JavaScript-Task-Läufer, der zeitaufwändige Aufgaben wie CSS-Komprimierung, SASS-Kompilierung, Bildoptimierung und Browser-Aktualisierung automatisiert. Es löst Aktionen basierend auf Ereignissen aus:

SASS -Datei speichern Trigger -SASS -Kompilierung und Minimified CSS -Ausgabe.

• Neue Bildzusatz löst die Optimierung und den Umzug in einen speziellen Ordner aus.
• PHP- oder SASS -Datei speichert Trigger automatische Browser -Reloads.

Gulp Setup

1. Globale Installation:

   Öffnen Sie Ihre Befehlszeile und installieren Sie Gulp global mit NPM:

   Überprüfen Sie die Installation mit

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

   . Sie sollten die Gulp -Version sehen.

   gulp -v

2. Themen-Setup (unter Verwendung von Unterdrückungen):

   Download Unterzahlen von unterstrichen.me, erstellen Sie ein Thema (z. B. "Gulp-Wortpress"), platzieren Sie es in Ihr WordPress-Themenverzeichnis und aktivieren Sie es.

3. Lokale Gulp -Installation:

   Navigieren Sie mit der Befehlszeile zu Ihrem Themenverzeichnis (z. B. ). Initialisieren Sie NPM:

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

   Befolgen Sie die Eingabeaufforderungen, um package.json zu erstellen. Dann Gulp lokal installieren:

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

4. ES6 Versprechensunterstützung: Installieren Sie die es6-promise Polyfill:

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

5. erstellen gulpfile.js: Erstellen Sie eine leere gulpfile.js -Datei im Stammverzeichnis Ihres Themas.

Beschleunigung der Entwicklung mit Gulp -Aufgaben

CSS (SASS) Workflow:

1. Plugins installieren:

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

2. Erstellen sass Verzeichnis: Erstellen Sie ein sass Verzeichnis mit Ihrer style.scss -Datei (einschließlich WordPress -Stylesheet -Header und einem Inhaltsverzeichnis).

3. gulpfile.js (SASS -Aufgabe): Diese Aufgabe erstellt SASS, fügt Anbieterpräfixe hinzu und generiert optional RTL -Stylesheets.

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

Dateianträge:

Fügen Sie eine Uhrenaufgabe hinzu, um die Aufgabe sass automatisch erneut auszuführen, wenn sich SASS-Dateien ändern:

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

Fehlerbehandlung mit gulp-plumber:

für eine verbesserte Fehlerbehandlung gulp-plumber und gulp-util installieren:

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

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

aktualisieren Sie Ihre sass Aufgabe:

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

JavaScript Workflow:

1. Plugins installieren:

   <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. erstellen .jshintrc: Erstellen Sie eine .jshintrc -Datei in Ihrem Thema, um JSHINT zu konfigurieren.

3. gulpfile.js (JS -Aufgabe): Diese Aufgabe verkettet, Lints und minimiert JavaScript -Dateien.

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

   Denken Sie daran, in Ihrem app.min.js functions.php

   zu unterhalten.

Bildoptimierung:

1. Plugin installieren:

   <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. Bildordner erstellen: /images/src Ordner erstellen /images/dist und

   .

3. gulpfile.js (Bildaufgabe):

   Diese Aufgabe optimiert Bilder.

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

   watch Aktualisieren Sie Ihre Aufgaben default und images, um die

   -Abgut zu enthalten.

browsersync für Echtzeit nachladen:

1. Plugin installieren:

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

2. gulpfile.js (BrowserSync -Integration):

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

'http://localhost:8888/wordpress/' Denken Sie daran,

durch Ihre lokale WordPress -Entwicklungs -URL zu ersetzen.

Dieser erweiterte Leitfaden bietet einen umfassenderen und strukturierteren Ansatz zur Integration von Gulp in Ihren Workflow zur Entwicklung von WordPress -Themen. Denken Sie daran, die Dokumentation für jedes Gulp -Plugin für erweiterte Konfigurationsoptionen zu konsultieren.

Das obige ist der detaillierte Inhalt vonWordPress -Thema Automatisierung mit Schluck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!