使用 Gulp 构建静态站点后部署到 gh-pages 的问题答案

【问题标题】：Issues deploying to gh-pages after building a static site with Gulp使用 Gulp 构建静态站点后部署到 gh-pages 的问题
【发布时间】：2016-08-02 08:49:37
【问题描述】：

我正在使用 Gulp、BrowserSync 构建一个静态网站，在我将更改推送到我的 gh-pages 分支之前，一切都运行良好，希望它能够通过我的 gh-pages 网站正确呈现正在创作。我做了一些研究，我知道由于 gh-pages 的工作方式，我用于链接、图像等的路径必须包含根目录......以及我所做的一些更改代码可以工作，但它最终会在使用 gulp 在本地运行页面时搞砸页面的工作方式。最重要的是，我在通过 jquery 加载部分 html 页面时遇到问题，我认为这也与托管在 gh-pages 上时路径错误有关。当我使用 gulp 在本地运行它时，一切正常。如果我只是从终端打开 index.html 页面，它可以正常工作，但是一旦我单击一个链接，事情就会变得一团糟。有没有人知道完整的教程、视频、博客，或者碰巧知道设置我的目录以确保它在本地以及在推送到 gh-page 时都可以工作的好方法？我附上了一张照片，显示了我的目录当前是如何设置的。

我的 gulpfile 看起来像这样

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

    gulp.task('styles', function () {
       return gulp.src('./scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.reload({stream: true}));
    });

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

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

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

这里是目前在 gh-pages 上的网站：https://andrewdpohl.github.io/STHR/

提前谢谢你

【问题讨论】：

如果您知道本地开发人员的基本路径，并且您知道 GH 页面上的基本路径，那么您不能进行单独的构建设置来替换代码中的基本路径吗？
不完全确定我会怎么做。你的意思是运行一个 gulp 任务，它基本上把我的所有文件都放在他们自己的文件夹中，然后发布到 gh-pages？

标签： html gulp github-pages

【解决方案1】：

vinyl-fs github repo 中记录了.src() 的使用： https://github.com/wearefractal/vinyl-fs

base 属性用于确定保存在.dest() 中时的文件名。

我认为你需要设置当前工作目录：

gulp.src('./**/*.js', {cwd: '../src/main/'})
    .pipe(gulp.dest('../target/dist'));

【讨论】：