Question

我已经改编了一个Gulp文件，它通常与Wordpress设置一起使用，只使用基本的HTML文件。但是我遇到了browserync没有重新加载我的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

来源文件夹中的所有HTML，JS，图片等基本上都会复制到模板名称文件夹。

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：＆＃39; ./'我读过去做here。但它没有更新。

当我直接查看我的index.html文件而没有浏览器同步我的所有CSS＆amp; JS有变化。

Answer 1

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

有效的Browsersync选项：

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

CSS没有使用BrowserSync重新加载而且无法使用JS获取/错误

1 个答案: