在服务器上实时监控网站的Grunt Watch LiveReload

Question

在服务器上实时监控网站的Grunt Watch LiveReload

5

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

Gruntfile:

module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  
  watch: {
   scripts: {
    options: { livereload: true },
    files: ['**/*.scss'],
    //tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'],
   }
  },
  
   postcss: {
   options: {
    processors: [
     require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes
     //require('cssnano')() // minify the result
    ]
   },
   dist: {
    src: 'style.css',
    dest: 'style.css'
   }
  },
 
  criticalcss: {
   front : {
    options: {
     url: "https://grandeurflooring.ca/grand_dev/",
     minify: true,
     width: 1500,
     height: 900,
     outputfile: "critical_css/critical-front.css",
     filename: "style.css",
     buffer: 800*1024,
     ignoreConsole: true
    }
   },
   page : {
    options: {
     url: "https://grandeurflooring.ca/grand_dev/sample-page/",
     minify: true,
     width: 1500,
     height: 900,
     outputfile: "critical_css/critical-page.css",
     filename: "style.css",
     buffer: 800*1024,
     ignoreConsole: true
    }
   }
  },
  
  cssmin: {
   target: {
    files: [{
      expand: true,
      cwd: 'critical_css',
      src: ['*.css', '!*.min.css'],
      dest: 'critical_css',
      ext: '.min.css'
    }]
   }
  }

 });

 // Load the plugin that provides the "critical" task.
 grunt.loadNpmTasks('grunt-criticalcss');
 // Load the plugin that provides the "cssmin" task.
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 // Load the plugin that provides the "watch" task.
 grunt.loadNpmTasks('grunt-contrib-watch');
 // Load the plugin that provides the "PostCSS" task.
 grunt.loadNpmTasks('grunt-postcss');

 // Critical task.
 grunt.registerTask('critical', ['criticalcss:front']);

};

在footer.php中，在wp_footer()之前，我放置了以下脚本：

<script src="http://localhost:35729/livereload.js"></script>

- Jordan Carter

如果您想向浏览器推送消息并重新加载页面，则需要使用WebSocket或服务器发送事件。或者您可以使用AJAX轮询。但我建议不要添加强制重新加载页面的代码。当您的网站上线时，您将希望删除该代码。 - Matt S

我正在服务器上进行开发，因此我希望即使以后需要删除代码，也能让它正常运行。如果您知道如何实现并且它有效，请发表回答，谢谢！ - Jordan Carter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lax1089 · Accepted Answer

你可以配置Grunt来监视编译后的CSS文件，该文件位于你的dist目录中，每次重新编译Sass时都会更新。下面是我实现你想要的功能的watch配置：

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。 编辑: 此外，你可以使用 grunt-contrib-watch 插件，它允许你在监视的文件模式添加、更改或删除时运行预定义任务。

此插件包含许多额外的选项，如实时重新加载、监视等，这些对你可能会有用。