我试图让grunt-browser-sync在更新/更改文件时将任何css更改注入打开的浏览器。但由于某种原因,我似乎可以让它工作,咕噜声没有给我任何错误让我知道它不起作用。
我目前正在使用MAMP,因为它是基于Wordpress的项目。
这是我的Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
以及保存/更新文件时的输出:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
但是我必须在物理上刷新浏览器以查看更改。
我不确定我是否遗漏了grunt文件中的内容或者是什么。
答案 0 :(得分:1)
使用此代码的唯一版本的 grunt-browser-sync 是1.9.1。因此,请卸载当前版本和
npm install grunt-browser-sync@1.9.1 --save-dev
答案 1 :(得分:0)
我遇到了同样的问题,并在这里打开了一个问题