我已经改编了一个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:' ./'我读过去做here。但它没有更新。
当我直接查看我的index.html文件而没有浏览器同步我的所有CSS& JS有变化。
答案 0 :(得分:0)
对于与此有问题的其他人,我设法通过在dir.build
中添加baseDir
来解决此问题。
有效的Browsersync选项:
// Browsersync options
const syncOpts = {
server: {
baseDir: dir.build
},
files : dir.build + '**/*',
open : false,
notify : false,
ghostMode : false,
};