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