javascript - gulp browsersync 和重新加载问题
问题描述
我是安装和使用 gulp 的新手,我花了好几天才完成这一部分,但是,我从反复试验中学到了很多东西,但现在我遇到了障碍。
这就是我的gulpfile.js中的内容:
// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browsersync = require('browser-sync');
var reload = browsersync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
// ERROR LOG
var onError = function (err) {
console.log('An error occurred:', gutil.colors.magenta(err.message));
gutil.beep();
this.emit('end');
};
// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
return gulp.src('./wp-content/themes/pixelboutique/sass/**/*.scss')
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./wp-content/themes/pixelboutique/css'))
.pipe(browsersync.stream())
done();
});
// MINIFY JS
gulp.task('js', function () {
return gulp.src('./wp-content/themes/pixelboutique/js/*.js')
.pipe(js())
.on('error', onError)
.pipe(rename({
suffix: '.min'
}))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./wp-content/themes/pixelboutique/js/min'))
.pipe(browsersync.stream())
done();
});
// IMAGES
gulp.task('imagemin', function () {
return gulp.src('./wp-content/themes/pixelboutique/images/*')
.pipe(imagemin())
.pipe(gulp.dest('./wp-content/themes/pixelboutique/images'))
done();
});
// BROWSERSYNC
gulp.task('browser-sync', function(done) {
browsersync.init({
proxy: 'http://localhost/testingsite/'
})
done();
});
// RELOAD
gulp.task('reload', function (done) {
browsersync.reload();
done();
});
// WATCH
gulp.task('watch', function() {
gulp.watch('./wp-content/themes/pixelboutique/sass/**/*.scss', gulp.series('sass', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/js/*.js', gulp.series('js', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/images/*', gulp.series('imagemin', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/**/*.php').on('change', browsersync.reload);
gulp.watch('*/pixelboutique/**/*.php').on('change', browsersync.reload);
});
gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));
// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browsersync = require('browser-sync');
var reload = browsersync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
// ERROR LOG
var onError = function (err) {
console.log('An error occurred:', gutil.colors.magenta(err.message));
gutil.beep();
this.emit('end');
};
// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
return gulp.src('./wp-content/themes/pixelboutique/sass/**/*.scss')
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./wp-content/themes/pixelboutique/css'))
// .pipe(browsersync.stream())
done();
});
// MINIFY JS
gulp.task('js', function () {
return gulp.src('./wp-content/themes/pixelboutique/js/*.js')
.pipe(js())
.on('error', onError)
.pipe(rename({
suffix: '.min'
}))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./wp-content/themes/pixelboutique/js/min'))
// .pipe(browsersync.stream())
done();
});
// IMAGES
gulp.task('imagemin', function () {
return gulp.src('./wp-content/themes/pixelboutique/images/*')
.pipe(imagemin())
.pipe(gulp.dest('./wp-content/themes/pixelboutique/images'))
done();
});
// BROWSERSYNC
gulp.task('browser-sync', function(done) {
browsersync.init({
proxy: 'http://localhost/testingsite/'
})
done();
});
// RELOAD
gulp.task('reload', function (done) {
browsersync.reload()
done();
});
// WATCH
gulp.task('watch', function() {
gulp.watch('./wp-content/themes/pixelboutique/sass/**/*.scss', gulp.series('sass', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/js/*.js', gulp.series('js', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/images/*', gulp.series('imagemin', 'reload'));
gulp.watch('./wp-content/themes/pixelboutique/**/*.php').on('change', browsersync.reload);
gulp.watch('*/pixelboutique/**/*.php').on('change', browsersync.reload);
});
gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));
这是终端的输出:
$ gulp
[12:43:31] Using gulpfile C:\xampp\htdocs\testingsite\gulpfile.js
[12:43:31] Starting 'default'...
[12:43:31] Starting 'sass'...
[12:43:31] Finished 'sass' after 300 ms
[12:43:31] Starting 'js'...
[12:43:32] Finished 'js' after 241 ms
[12:43:32] Starting 'imagemin'...
[12:43:32] gulp-imagemin: Minified 0 images
[12:43:32] Finished 'imagemin' after 11 ms
[12:43:32] Starting 'browser-sync'...
[12:43:32] Finished 'browser-sync' after 72 ms
[12:43:32] Starting 'watch'...
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
--------------------------------------------------
Local: http://localhost:3000/testingsite/
External: http://192.168.0.37:3000/testingsite/
--------------------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------------------
[12:43:40] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:40] Finished 'sass' after 266 ms
[12:43:40] Starting 'reload'...
[12:43:40] Finished 'reload' after 796 μs
[Browsersync] Reloading Browsers...
[12:43:49] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:49] Finished 'sass' after 203 ms
[12:43:49] Starting 'reload'...
[12:43:49] Finished 'reload' after 371 μs
[Browsersync] Reloading Browsers...
[12:43:51] Starting 'sass'...
[Browsersync] 2 files changed (style.css, woocommerce.css)
[12:43:51] Finished 'sass' after 206 ms
[12:43:51] Starting 'reload'...
[12:43:51] Finished 'reload' after 458 μs
[Browsersync] Reloading Browsers...
[12:44:00] Starting 'js'...
[Browsersync] 1 file changed (all.min.js)
[12:44:00] Finished 'js' after 167 ms
[12:44:00] Starting 'reload'...
[12:44:00] Finished 'reload' after 431 μs
[Browsersync] Reloading Browsers...
我在 sass、js 和 php 中的文件更改被监视并且浏览器刷新,但是 js 和 sass 没有注入到站点中。php更改被重新加载并注入ok。
解决方案
推荐阅读
- html - 身高没有改变/在我的网站上工作
- php - 将数据从视图传递到控制器,其中数据来自另一个控制器
- javascript - 如何遍历对象数组并将每个对象显示到图表中?
- python - 使用 legend_elements 设置散点图图例标签
- javascript - 在自定义点击时反应条件样式
- flutter - UI 未在 setState 上更新。但是在我洗牌我想要显示的列表之后(困惑)。未解决
- laravel - 我如何在登录中使用不同级别的令牌并使用 laravel 在所有功能中测试它
- r - R jupyter笔记本中具有聚集标准错误的回归表?
- azure-devops - 可以在 Azure Pipelines 中完成条件变量赋值吗?
- c - C中自发的缓冲区溢出