我正在尝试在Mamp Pro的WordPress开发站点中使用grunt。我遇到的问题是Browsersync。当我更改PHP文件时,浏览器会重新加载,但我的更改未显示在页面上。就像被缓存一样,硬重装不会改变任何东西,在隐身浏览器中签入不会改变任何东西。如果我转到mysite.localhost:8888,则会看到我的更改。如果我将WP主题更改为二十一,然后再更改主题,则看到的是我所做的更改,但看不到后续更改。我必须每次都进行主题交换才能看到任何更改。我在Sass中所做的更改无需重新加载即可注入页面(是!)。你能看到我做错了吗?我已经检查过了,我的页面上确实有标签。谢谢!
我的Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['assets/styles/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer', 'cssmin'] // string-replace removed for css injection during dev
}
},
// sass
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'assets/styles/build/style.css': 'assets/styles/main.scss', // 'destination': 'source'
}
}
},
// autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions', 'ie 9', 'ios 6', 'android 4'],
map: true
},
files: {
expand: true,
flatten: true,
src: 'assets/styles/build/*.css',
dest: 'assets/styles/build'
},
},
// css minify
cssmin: {
options: {
keepSpecialComments: 1,
sourceMap: true
},
target: {
files: {
'style.css' : 'assets/styles/build/style.css',
}
}
},
// browserSync
browserSync: {
dev: {
bsFiles: {
src : ['**/*.php', 'style.css', 'assets/js/*.js', 'assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}']
},
options: {
proxy: "mysite.localhost:8888",
watchTask: true,
reloadDelay: 2000,
browser: "google chrome"
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['sass', 'autoprefixer', 'cssmin', 'browserSync', 'watch']);
};