Gulp - fichiers html multiples - comment afficher un choisi dans localhost: 3000?

Question

Mon numéro est: J'ai un projet avec plusieurs fichiers html représentant des pages séparées. Je voudrais être en mesure de voir une page à la fois dans un navigateur sous localhost: adresse 3000. La structure du fichier de projet est comme indiqué sur une image:

J'ai mis en place une gulp de manière à afficher html sous localhost: 3000. Cependant, je n'ai aucune idée de comment voir chaque page séparément dans un navigateur. Il n'en affichait qu'un quand je l'ai mis au même niveau avec "styles.scss".

Ceci est mon gulpfile.js:

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var browserSync = require('browser-sync').create(); 

gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: "./app" 
    }); 

    gulp.watch("app/**/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 
}); 

// Compile sass into CSS & auto-inject into browsers 
gulp.task('sass', function() { 
    return gulp.src("app/**/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest("app/css")) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('default', ['serve']); 

Est-ce quelque chose que je devrais mettre en lampée d'avoir ces htmls rendus dans un navigateur? Je ne voudrais pas changer beaucoup la structure des fichiers.

Answer 1

Essayez d'ajouter "index": "home.html" à vos options browserSync comme:

gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
    server: "./app", 
    index: "home.html" 
    }); 

    gulp.watch("app/**/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 
}); 

Si cela ne fonctionne pas pour une raison quelconque, vous pouvez essayer:

server: { 
    baseDir: "./pathtoYourDirectoryWithTheHTML", 
    index: "home.html" 
}, 

En ce qui concerne la commutation entre les pages html dans la même instance de browserSync en cours d'exécution, je ne sais pas que vous pouvez le faire. Mais vous pouvez démarrer un autre serveur browserSync via:

var browserSync2 = require('browser-sync').create(); 

C'est tout le point de create(). Et puis une autre tâche engouffreur tout comme votre « servir », mais qui utilise browserSync2 et « index »: «yourOtherPage »

Answer 2

je réussi à avoir un résultat basé sur: Browsersync not reloading all pages

Sur la base de ce que j'ai changé mon gulp à :

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    gulp.watch('app/**/*.scss', ['sass']); 
    gulp.watch('app/**/*.html').on('change', browserSync.reload); 
    browserSync.init({ 
     files: ['app/pages/home/home.html','app/pages/subpage/subpage.html'], 
     server:{ 
     baseDir:'app', 
     directory: true 
     } 
    }); 
}); 

gulp.task('sass', function() { 
    return gulp.src('app/**/*.scss') 
     .pipe(sass()) 
     .pipe(gulp.dest('app/css')) 
     .pipe(browserSync.stream()); 
}); 

en effet, je peux accéder à toutes les pages en changeant l'adresse dans une URL, par exemple:

http://localhost:3000/pages/subpage/subpage.html ou http://localhost:3000/pages/home/home.html