Gruntjs Grunt在服务器上的站点上观看LiveReload

我正在服务器上开发WordPress站点（不是本地的）。每当我修改sass文件时，我都希望刷新浏览器中的页面。我已经列出了一些grunt任务，但现在我只想在任何sass修改时刷新它。现在，只要文件被修改，它就会捕获，但不会刷新页面

Grunfile：

module.exports=函数（grunt）{
//项目配置。
grunt.initConfig({
pkg:grunt.file.readJSON（'package.json'），
观察：{
脚本：{
选项：{livereload:true}，
文件：['***.scss']，
//任务：['criticalcss:front'，'criticalcss:page'，'cssmin'，'postcss']，
}
},
邮政编码：{
选项：{
处理器：[
require（'autoprefixer'）（{browsers:'last 6 versions'}），//添加供应商前缀
//require（'cssnano'）（）//缩小结果
]
},
地区：{
src:'style.css'，
dest:'style.css'
}
},
关键CSS：{
正面：{
选项：{
url:“https://grandeurflooring.ca/grand_dev/",
缩小：是的，
宽度：1500，
身高：900，
输出文件：“critical_css/critical front.css”，
文件名：“style.css”，
缓冲区：800*1024，
ignoreConsole：对
}
},
第页：{
选项：{
url:“https://grandeurflooring.ca/grand_dev/sample-page/",
缩小：是的，
宽度：1500，
身高：900，
输出文件：“critical_css/critical page.css”，
文件名：“style.css”，
缓冲区：800*1024，
ignoreConsole：对
}
}
},
cssmin：{
目标：{
档案：[{
是的，
cwd:“关键的”css“，
src:['*.css'，'！*.min.css']，
dest:“临界值”，
分机：'.min.css'
}]
}
}
});
//加载提供“关键”任务的插件。
grunt.loadNpmTasks（'grunt-criticalcss'）；
//加载提供“cssmin”任务的插件。
grunt.loadNpmTasks（'grunt-contrib-cssmin'）；
//加载提供“监视”任务的插件。
grunt.loadNpmTasks（“grunt-contrib-watch”）；
//加载提供“postss”任务的插件。
grunt.loadNpmTasks（“grunt-postsss”）；
//关键任务。
registerTask（'critical'，['criticalcss:front']）；
};

您可以配置Grunt以查看

dist

目录中编译的css文件，该文件将在每次重新编译Sass时更新

这是我的

手表

配置，它实现了您想要的功能：

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['index.html'],
  },
  js: {
    files: ['js/**/*.js'],
    tasks: ['jshint'],
  },
  sass: {
    options: {
      livereload: false
    },
    files: ['css/scss/**/*.scss'],
    tasks: ['sass'],
  },
  css: {
    files: ['dist/css/master.css'],
    tasks: []
  }
}

根据您的设置，您可能需要将

spawn:false

更改为

spawn:true

编辑：此外，您可以使用插件，该插件允许您：

在添加、更改或删除监视的文件模式时运行预定义任务

---

此插件包含许多用于实时重新加载、观看等的附加选项，您可能会发现这些选项很有用。

如果您想将消息推送到浏览器并让其重新加载页面，则需要使用websocket或服务器发送的事件。也可以使用AJAX进行投票。但我建议不要添加强制重新加载页面的代码。当你的网站处于活动状态时，你无论如何都会想删除代码。不过，我正在服务器上开发，所以我想让它启动并运行，即使这意味着以后要删除代码。如果您碰巧知道一个实现如何做到这一点，并且它可以工作，您介意发布一个答案吗？在服务器上开发时，这对您有用吗？另外，我也不想问，但是你知道有没有类似的gulp插件可以在服务器开发上实现这一点吗？我刚开始狼吞虎咽，到目前为止我很喜欢。是的，这对我在服务器上开发时很有用。我已经更新了我的答案，加入了一个你可能更喜欢使用的插件。