Bonjour,

https://github.com/codwerk/Sass-Workflow-Dev-Server.git

j'essaye de maîtriser les nouveau outils de développement web comme gulp. j'ai fait un workflow dans le quel j'ai fait 2 tâche :

une tâche "css"qui produira un fichier CSS propre et lisible au sein de notre dossier "dist" (styles.css)  $ gulp css 
une tâche"minify"qui compressera et produira un fichierstyles.min.cssaux côtés de notre joli fichier styles.css $ gulp minify

je n'arrive pas a faire en sorte que les deux s’exécute en même temps. j'utilise le browserSync je sais si c'est ça le problème. je novice dans la construction de workflow.

j'ai besoin d'aide merci d'avance.

// Requis
var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create();

// Include plugins
 var plugins = require('gulp-load-plugins')(); // tous les plugins de package.json

 // Variables de chemins
var source = './src'; // Dossier de travail
var destination = './dist'; // Dossier à livrer

// Tâche "build" = SASS + autoprefixer + CSScomb + beautify ()
gulp.task('css', function(){
    return gulp.src(source + '/scss/main.scss')
        .pipe(sourcemaps.init())
        .pipe(plugins.sass({ sourceComments:'map'}).on('error', sass.logError)) // Compiler SASS vers CSS
        .pipe(plugins.csscomb()) // Réordonner les propriétés
        .pipe(plugins.cssbeautify({indent: ' '})) // Ré-indenter et reformater
        .pipe(plugins.autoprefixer({
            browsers: ['last  2 versions']
        })) // Ajouter automatiquement les préfixes CSS3
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest(destination + '/css/'))
        .pipe(browserSync.stream());
});

// Tâche "Minify" = minifications CSS (destination -> destination)
gulp.task('minify', function(){
    return gulp.src(destination + '/css/*.css')
        .pipe(plugins.csso())
        .pipe(plugins.rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(destination + '/css'))
        .pipe(browserSync.stream());
});


// Tâche "build"
gulp.task('build', ['css']);


// Tâche "prod" = Build + minify
gulp.task('prod', ['build', 'minify']);


// Tâche par défaut
gulp.task('default', ['build']);

gulp.task('browserSync', function(){
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    })
});

// Tâche "watch" = je surveille *sass
gulp.task('watch', ['browserSync', 'prod', 'build'], function (){
    gulp.watch(source + '/scss/*.scss', ['build']);
});

-
Edité par Werk_Code 28 avril 2018 à 9:44:54