instagram

WordPress och Gulp, exempel på hur man kan använda dem tillsammans

Jag har i senare projekt börjat använda Gulp, istället för Grunt. Båda är utmärkta och fungerar ypperligt tillsammans med WordPress. Här kommer ett exempel på hur du kan bygga dina css till WordPress med hjälp av Gulp.

Detta är ingen heltäckande text om Gulp, men i stort behöver du npm. och sedan kör du följande för att göra en global installation

$ npm install gulp -g

Därefter behövs en lokal installation i ditt projekt. Navigera till:

/wp-content/themes/ditt_tema/

och kör:

$ npm install gulp --save-dev

Så skapas en package.json i samma mapp där du befinner dig och du kan lägga till moduler i ditt projekt på detta sätt (gulp-autoprefixer är ett exempel). Moduler hittar du här.

$ npm install gulp-autoprefixer --save-dev

Nu har du en grundläggnde setup, men hur anpassar vi detta till WordPress?

Alla wp-teman måste ha sin style.css för att fungera, men det finns inget som säger att temats css:er inte kan flyttas till en annan plats. Jag brukat ha en ganska tom styles.css i mina teman och istället skapa en ny mapp här. /wp-content/themes/assets/styles. Under denna mapp skapar jag följander mappar. build, manifest, src och tmp, dvs fyra olika mappar.

  • build, är till de byggda filerna
  • manifest, är där manifest-filen ligger (återkommer til vad det är)
  • src, är där alla mina style-filer ligger, och jag användes sass i detta fallet
  • tmp, är en katalog jag använder för temporär lagring då byggena körs

Nu behöver vi skapa en Gulpfile.js där vi sparar all kod som ska köra våra Gulp-jobb. Överst i filen laddar jag in de moduler jag behöver (alla dessa måste finnas installerade -> $npm install gulp-namnet-på-modulen –save-dev).

var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'),
watch = require('gulp-watch'),
autoprefixer= require('gulp-autoprefixer'),
rev = require('gulp-rev'),
clean = require('gulp-clean');

Därefter börjar vi stukturera upp jobben som ska köras. Jag inleder med ett städjobb, som helt enkelt tar bort filer vi inte behöver. Detta definierar jag som clean. Namnet återkommer jag till snart.

gulp.task('clean', function () {
gulp.src('assets/styles/build/*')
.pipe(clean());
});

Vad är det som händer? Jo, vi pekar ut mappen Build, och raderar alla filer i den med hjälp av clean().

Därefter lägger vi till kod (i Gulpfile.js) för att bygga samman mina styles. Det är lite mer att skriva men Gulp gör det väldigt läsbart eftersom alla metoder kedjas så de utförs en i taget, efter varandra.

gulp.task('styles', function () {
gulp.src('assets/styles/src/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 versions', 'ie 9', 'ios 6', 'android 4'))
.pipe(minifyCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/styles/tmp'))
.pipe(rev())
.pipe(gulp.dest('assets/styles/build'))
.pipe(rev.manifest())
.pipe(gulp.dest('assets/styles/manifest'));
});

Vad händer här då? Först lokaliserar vi mappen /src/ där alla min css-filer ligger (eller i detta fall sass-filer, .scss). Sedan körs vi igenom dessa, autoprefixar, och minifierar. Därefter skapas filen style.css, och denna sparas ner i mappen /tmp/. Väl där kör skapar vi en revision, dvs en fil som har ett unikt namn (för att kunna cachebusta). Filen med det unika namnet flyttas slutligen till mappen /build/ (och heter något i stil med style-353464.css).
Sist skapar vi ett manifest som läggs i mappen /manifest/. Manifestet är en liten json-fil som innehåller en referens till css-filen. I detta fallet skulle den se ut så här.


{
"style.css": "style-353464.css"
}

Namnet på revisionen och manifestet skapar modulen Gulp-rev, så det behöver vi inte tänka på.

Sist i Gulpfile.js skapar vi upp en task, dvs vi pekar ut de jobb som ska köras då man skriver $ gulp i terminalen. Detta innebär att vi först kör clean, och därefter kör styles. Dvs, först rensar vi bort ev gamla filer och sedan skapar vi nya.

gulp.task('default', ['clean','styles']);

Den nya versionehanterade, minifierade och tillfixade css-filen är på plats. Nu återstår bara att lägga in den i ditt wp-tema och för att lösa det lägger jag in följande metoder i mina klasser. Först behöver jag ett sätt att hämta ut data från manifest-filen (THEME_PATH har jag definierat tidigare och den pekar på mitt tema). Jag hämtar fram filen, decodar json-formatet och retunerar ut värdet med hjälp av nyckeln style.css (som jag tidigare definierat i Gulpfile.json).

public function get_busters(){

$file = file_get_contents( THEME_PATH.'/assets/styles/manifest/rev-manifest.json' );

if ( $file ) {

$buster_as_array = json_decode( $file, TRUE );

return $buster_as_array['style.css'];

}

}

Då är det klart! Vi vet i vilken mapp style-filen ligger och vi vet vad den heter. Nu kan man göra precis som vanligt och använda wp_register_style för att lägga in style-filen i sitt tema. Det fina är att filen är helt cache-bustad, den är prefixad och minifierad.

Gulp kan göra mycket mer är detta. Till exempel kan du göra ungefär samma manöver med dina javascript, optimera bilder eller bygga sprites.