… 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
- installation de node
- installation de npm
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 :
Et ça marche !!!! 🙂
Autre source :