Gulp - 多個html文件 - 如何在localhost：3000中顯示所選的一個？

我的問題是：我有一個項目有幾個html文件代表單獨的頁面。我希望能夠在localhost：3000地址下的瀏覽器中查看一個頁面。該項目的文件結構如圖所示： Gulp - 多個html文件 - 如何在localhost：3000中顯示所選的一個？

我已經建立了一種方式來顯示html localhost：3000下的一個gulp。但是，我不知道如何在瀏覽器中分別查看每個頁面。當我將它與「styles.scss」放在同一層時，它只顯示其中的一個。

這是我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']);

有什麼事情，我應該把在一口有瀏覽器中呈現的HTMLS？我不想改變很多文件的結構。

來源

2017-10-07 bakrall

這個問題不應該是關於Browsersync的嗎？ Gulp只是一個自動化工具。 – Boaz

我認爲你是對的。我沒有想到它，因爲它們都是我的新手。 – bakrall

在這種情況下，您的目的是在開發過程中快速測試HTML文件中的更改，還是將網頁作爲網站提供？如果前者，那麼你是在正確的方向;如果是後者，那麼你可能想看看Express。 – Boaz

嘗試添加「指數」：「/home.html」的你browserSync選項，如：

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); 
});

如果不出於某種原因，你可以試試：

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

至於在browserSync的同一個運行實例中切換html頁面，我不知道你可以這樣做。但您可以通過以下方式啓動另一個BrowserSync服務器：

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

這就是create（）的全部要點。然後又是一口任務就像你的「服務」，但使用browserSync2和‘指標’：‘yourOtherPage’

來源

2017-10-07 21:01:23 Mark

謝謝！你的提示幫助了我。使用不同的吞嚥任務和瀏覽器同步時，我設法呈現了不同的頁面。但不知何故，gulp自動停止刷新html，我不得不手動刷新。但無論如何，我有頁面呈現:) – bakrall

，非常感謝！我花了一段時間纔有時間回到這個問題的項目，但最後我成功了。我改變了我的文件後，你的建議，我改變了文件夾的結構（我把所有的HTML文件直接放在「應用程序」文件夾下），它完美的工作！而且比我以前的實施要好得多。我也刪除了「文件」，但仍然自動呈現更改。 – bakrall

並且所有的browserSync同一個工作:) – bakrall

我設法基礎上有一些結果：Browsersync not reloading all pages

此基礎上我改變了我一口，以：

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()); 
});

作爲一個效果，我可以通過在URL地址變更訪問的所有頁面，例如：

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

來源

2017-10-08 11:32:37 bakrall

很高興你得到它的工作，但文件選項僅用於觀看對文件的更改。它與你在localhost下加載它們的能力沒有任何關係。但是我的說法錯了，您可能需要啓動另一個browserSync實例來提供另一個html頁面。我可以愉快地在html頁面之間來回切換，如果這些文件在同一個目錄中，我就會看到原始代碼。它只是使「索引」頁面成爲默認頁面。但是被「目錄」覆蓋：true - 這是你的關鍵。 – Mark

你應該知道，它不是使你的工作的「文件」選項。但它應該看這些文件的變化，你可能想要的。 – Mark

如果每個文件夾都有不同的父文件夾，例如：pages/home/home.html，pages/subpage/subpage.html，您是否認爲我的文件位於相同的目錄中？ – bakrall

Gulp - 多個html文件 - 如何在localhost：3000中顯示所選的一個？

回答

相關問題