Simplifiez le développement de vos thèmes avec Gulp…

… Voilà le titre de l’article http://www.geekpress.fr/wordcamp-paris-themes-gulp/  qui propose de mettre en oeuvre Gulp. Je rajoute ici quelque éléments qui m’ont manqués pour terminer l’installation.

Pré-requis

Commande dans le terminal à partir du répertoire du thème WP

# npm init
# npm install browser-sync --save-dev
# npm install gulp --save-dev
# npm install gulp-autoprefixer --save-dev
# npm install gulp-stylus --save-dev
# npm install stylus --save-dev
# npm install gulp-plumber --save-dev
# npm install gulp-sourcemaps --save-dev

Fichier gulpfile.js

const gulp = require("gulp")
const stylus = require("gulp-stylus")
const autoprefixer = require("gulp-autoprefixer")
const plumber = require("gulp-plumber")
const sourcemaps = require('gulp-sourcemaps')

const bs = require("browser-sync").create()

gulp.task("browser-sync", function() {
  bs.init({
    proxy: "http://...", // Ici votre url 
    ghostMode: false,
    open: false,
    notify: false
  })
})

gulp.task("stylus", function() {
  return gulp
    .src("./stylus/main.styl")
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(
      stylus({
        compress: true
      })
    )
    .pipe(autoprefixer({ browsers: ["last 2 versions"] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("./css"))
    .pipe(bs.reload({ stream: true }))
})

gulp.task("watch", ["browser-sync"], function() {
  gulp.watch("./stylus/**/*.styl", ["stylus"])
  gulp.watch("./*.php").on("change", bs.reload)
  gulp.watch("./*.css").on("change", bs.reload)
  gulp.watch("./*.js").on("change", bs.reload)
  gulp.watch("./views/**/*.twig").on("change", bs.reload)
})

On peut vérifie les versions de tout ça avec :

# node -v
# npm -v
# gulp -v

Lancer Gulp

# gulp watch

Moi j’obtiens ça :

Capture Sebus - 2018-03-12 à 16.43.01

Et ça marche !!!! 🙂

 

Autre source :

How to Install gulp and bower globally on Mac OSX