CSS 未使用 BrowserSync 重新加载，并且无法使用 JS 获取 / 错误

Question

我已经修改了一个 Gulp 文件，它通常与 Wordpress 设置一起使用，以仅使用基本的 HTML 文件。但是，我遇到了 browsersync 没有重新加载我的 CSS 的问题，并且在尝试获取我的 .JS 文件时出现Cannot GET /js/all.min.js 错误。

当我对 index.html 进行 HTML 更改时，它们会通过 browsersync 进行更新，只是 CSS 和 JS 没有更新。

我的文件夹结构是：

Build
|_ source (source files in here)
   |_ SASS
      |- All my sass files
   |_ Images
       |- All my images files
   |_ JS
       |- All my .JS files
   |_ node_modules
       |- All my node_module files
   |- Index.html
   |- gulp.js
   |- package.json

|_ template-name (production files here)
   |_ CSS
       |- style.css
   |_ JS
       |- all.min.js
   |_ Images
       |- All images in here
   |- Index.html

source 文件夹中的所有 HTML、JS、图像等基本上都复制到 template-name 文件夹中。

Gulp 文件：

// Gulp.js configuration
'use strict';

const

  // source and build folders
  dir = {
    src         : '',
    build       : '../template-name/'
  },

  // Gulp and plugins
  gulp          = require('gulp'),
  gutil         = require('gulp-util'),
  newer         = require('gulp-newer'),
  imagemin      = require('gulp-imagemin'),
  sass          = require('gulp-sass'),
  postcss       = require('gulp-postcss'),
  sourcemaps    = require('gulp-sourcemaps'),
  autoprefixer  = require('gulp-autoprefixer'),
  deporder      = require('gulp-deporder'),
  concat        = require('gulp-concat'),
  stripdebug    = require('gulp-strip-debug'),
  uglify        = require('gulp-uglify')
;

// Browser-sync
var browsersync = false;


// HTML settings
const html = {
  src           : dir.src + '**/*.html',
  build         : dir.build
};

// copy HTML files
gulp.task('html', () => {
  return gulp.src(html.src)
    .pipe(newer(html.build))
    .pipe(gulp.dest(html.build));
});

// image settings
const images = {
  src         : dir.src + 'images/**/*',
  build       : dir.build + 'images/'
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

// CSS settings
var css = {
  src         : dir.src + 'sass/style.scss',
  watch       : dir.src + 'sass/**/*',
  build       : dir.build + 'css/',
  sassOpts: {
    outputStyle     : 'nested',
    imagePath       : images.build,
    precision       : 3,
    errLogToConsole : true
  },
  processors: [
    require('postcss-assets')({
      loadPaths: ['images/'],
      basePath: dir.build,
      baseUrl: './'
    }),
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker'),
    require('cssnano')
  ]
};

// CSS processing
gulp.task('css', ['images'], () => {
  return gulp.src(css.src)
    .pipe(sass(css.sassOpts))

    .pipe(sourcemaps.init())
    .pipe(postcss(css.processors))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest(css.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

// JavaScript settings
const js = {
  src         : dir.src + 'js/**/*',
  build       : dir.build + 'js/',
  filename    : 'all.min.js'
};

// JavaScript processing
gulp.task('js', () => {

  return gulp.src(js.src)
    .pipe(deporder())
    .pipe(concat(js.filename))
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(gulp.dest(js.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

// run all tasks
gulp.task('build', ['html', 'css', 'js']);


// Browsersync options
const syncOpts = {
  server: {
    baseDir: './'
  },
  files       : dir.build + '**/*',
  open        : false,
  notify      : false,
  ghostMode   : false,
};


// browser-sync
gulp.task('browsersync', () => {
  if (browsersync === false) {
    browsersync = require('browser-sync').create();
    browsersync.init(syncOpts);
  }
});

// watch for file changes
gulp.task('watch', ['browsersync'], () => {

  // page changes
  gulp.watch(html.src, ['html'], browsersync ? browsersync.reload : {});

  // image changes
  gulp.watch(images.src, ['images']);

    // CSS changes
  gulp.watch(css.watch, ['css']);

  // JavaScript main changes
  gulp.watch(js.src, ['js']);

});

// default task
gulp.task('default', ['build', 'watch']);

我已经更新了服务器 {} 设置，现在它有一个 baseDir: './' 我读过它来做here。但是它没有更新。

当我在没有浏览器同步的情况下直接查看我的 index.html 文件时，我的所有 CSS 和 JS 更改都在那里。

Answer 1

对于其他对此有疑问的人，我设法通过将dir.build 添加到baseDir 来解决此问题。

工作 Browsersync 选项：

// Browsersync options
const syncOpts = {
  server: {
    baseDir: dir.build
  },
  files       : dir.build + '**/*',
  open        : false,
  notify      : false,
  ghostMode   : false,
};