Lier les CSS avec gulp

Ekim Kael
Javascript NodeJS

salut à tous

je viens de débuter avec gulp(je l'ai installé et configurer aujourd'hui)
mais tout ce passe bien jusqu'au moment ou je veux que le navigateur se reactualise quand tu enregistres.
si cette tache est un success il n'en reste pas moins que je n'arrive pas avoir mon rendu css sur la page.

j'ai bien précisé le chemin du fichier CSS mais rien ne s'affiche quand je modifie le css(enfin le fichier less).
voici la configuration de gulp

    gulp.task('watch',['browserSync','css'], function(){
    gulp.watch('src/assets/css/**/*.less', ['css']);
    //actualiser aussi les fichier CSS, JS et HTML
    gulp.watch('dist/assets/css/**/*.css', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/assets/js/**/*.js', browserSync.reload);
    });

et voici comment je l'ai appelé

    <!DOCTYPE html>
    <html>
    <head>
        <title>GulpTest</title>
        <link rel="stylesheet" type="text/css" href="../dist/assets/css/.style.css">
    </head>

6 réponses

Defy

essaye comme ceci les chemins dans ton gulpfile

gulp.task('watch',['browserSync','css'], function(){
    gulp.watch('./src/assets/css/**/*.less', ['css']);
    //actualiser aussi les fichier CSS, JS et HTML
    gulp.watch('./dist/assets/css/**/*.css', browserSync.reload);
    gulp.watch('./src/*.html', browserSync.reload);
    gulp.watch('./src/assets/js/**/*.js', browserSync.reload);
    });
Ekim Kael
Auteur

ça ne marche toujours pas

Defy

quel est l'architecture de tes dossiers?

Ekim Kael
Auteur
gulpTest (Dossier principal) 
_dist
    __assets
        ___css
            ____style.css
_src
    __assets
        ___css
            ____style.css
    index.php

gulpfile.js
package.json
node_modules

Defy

fait voir ton gulpfile aussi

Ekim Kael
Auteur 
//requis
var gulp = require('gulp');
//inclure les plugins
var less = require('gulp-less');
var browserSync = require('browser-sync');
//variables de chemins
var source = './src';
var destination = './dist';

//Taches

gulp.task('css', function(){
   return gulp.src(source + '/assets/css/style.less')
   .pipe(less())
   .pipe(gulp.dest(destination + '/assets/css/'))
   .pipe(browserSync.reload({
        stream:true
    }))
});
gulp.task('watch',['browserSync','css'], function(){
    gulp.watch('./src/assets/css/**/*.less', ['css']);
    //actualiser aussi les fichier CSS, JS et HTML
    gulp.watch('./dist/assets/css/**/*.css', browserSync.reload);
    gulp.watch('./src/*.html', browserSync.reload);
    gulp.watch('./src/assets/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function(){
   browserSync.init({
      server:{
          baseDir:'src/'
      } 
   });
});