我是安装和使用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的变化是重新加载和注入好.
1条答案
按热度按时间8yparm6h1#
对我来说,问题是adsblock扩展阻止了browsersync重新加载,请确保在特定页面上关闭它。我甚至不得不关闭浏览器并再次打开它,以确保它完全关闭。