Bonjour,

j'ai mis en place un gulp pour développer mes wordpress tout fonctionne sauf le browsersync.
Il me crée bien ma page après le watch mais dés que je fais des modifs elle sont bien prises en compte maius j'ai pas de rafraichissement de la page
voici mon fichier gulp qui se trouve à la racine du theme

path = {
    server: './',
    scss: 'dev/css/',
    img: 'dev/img/',
    js: 'dev/js/',
};
global.browser_support = ["ie >= 9", "ie_mob >= 10", "ff >= 10", "chrome >= 34", "safari >= 5", "opera >= 23", "ios >= 7", "android >= 4.4", "bb >= 10"];

/*REQUIRE*/
var gulp = require('gulp');
var browserSync  = require('browser-sync');
var reload  = browserSync.reload;
var svgmin = require('gulp-svgmin');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');
var cssnano = require('gulp-cssnano');
var sass= require('gulp-sass');
var plumber= require('gulp-plumber');
var autoprefixer= require('gulp-autoprefixer');
var imagemin= require('gulp-imagemin');
var newer= require('gulp-newer');
var concat= require('gulp-concat');
var uglify= require('gulp-uglify');

var onError = function(err){
    console.log(err);
    this.emit('end');
}

/*JAVASCRIPT*/
gulp.task('js',  function(){
     return gulp.src(['dev/js/jquery.js','dev/js/libs/*.js','dev/js/main.js'])
    .pipe(plumber({errorHandler: onError}))
    .pipe(concat('main.min.js'))
    .pipe(uglify('main.min.js'))
    .pipe(gulp.dest('./'))
     .pipe(reload({stream:true}))
});

/*GENERATION SPRITE SVG*/
gulp.task('svg', function () {
    return gulp.src(path.img+'/svg/*.svg')
        .pipe(svgmin())
        .pipe(svgstore())
        .pipe(rename("sprite.svg"))
        .pipe(gulp.dest('images/'));
});

/*GENERATION CSS*/
gulp.task('css', function(){
     return gulp.src(path.scss+'*.scss')
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass())
    .pipe(autoprefixer({
            browsers: global.browser_support,
            cascade: false
    }))
    .pipe(rename( {basename: "style"}))
    .pipe(gulp.dest('./'))
    .pipe(cssnano())
   .pipe(rename( {
                basename: "style",
                suffix: '.min'
            }))
    .pipe(gulp.dest('./'))
    .pipe(reload({stream:true}))

});

/*GENERATION IMG*/
gulp.task('img',function(){
    opts = {optimizationLevel: 5, progressive: true, interlace: true };
    gulp.src(path.img+'/*.*')
    .pipe(newer(path.img+'/*.*'))
    .pipe(imagemin(opts))
    .pipe(gulp.dest('images/'))
});

/*browser-snyc*/
gulp.task('browser-sync', function(){
    browserSync.init({
        proxy: 'localhost:8888/monsitewordpress'
    });
});
/*WATCH*/
gulp.task('watch',['browser-sync'],function(){
    gulp.watch(path.scss+'**.scss',['css'])
    gulp.watch(path.js+'*.js',['js'])
    gulp.watch('*.php').on('change',browserSync.reload)
});

Merci de votre aide

4 réponses


lgm243
Auteur
Réponse acceptée

Oui mon fichier gulp est bien au niveau des fichiers php de mon theme

tes fichiers PHP sont tous a la racine? il ne sont pas dans des dossiers séparé?

lgm243
Auteur

no sont tous à la racine d emon theme

montheme --fichierwordpress.php (idex.php / page-template.php ...)
--style.min.css
--function.php
--gulpfiles.js
--images/
--dev/
 --scss/
 --js/
 --img/

tu as le gulpfile qui est au meme niveau que tes dossiers php?