我已经改编了一个Gulp文件，它通常与Wordpress设置一起使用，只使用基本的HTML文件。但是，我在浏览器同步无法重新加载我的 CSS 时遇到了问题，并且在尝试获取我的 .JS 文件时出现Cannot GET /js/all.min.js错误。
当我对索引进行 HTML 更改时.html它们确实通过浏览器同步更新，只是 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.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："./"，我在这里阅读了。但是它没有更新。
当我在没有浏览器同步的情况下直接查看我的索引.html文件时，我所有的CSS和JS更改都在那里。
对于对此有问题的任何其他人，我设法通过在baseDir中添加dir.build来解决此问题。
工作浏览器同步选项：
// Browsersync options
const syncOpts = {
server: {
baseDir: dir.build
},
files : dir.build + '**/*',
open : false,
notify : false,
ghostMode : false,
};