Grunt Watch LiveReload 在服务器上的现场

Question

我正在服务器（非本地）上开发 WordPress 网站。每当我修改 sass 文件时，我都想在浏览器中刷新页面。我列出了一些繁重的任务，但现在我只想让它在任何 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>

Answer 1

您可以将 Grunt 配置为在您的 dist 目录中查看编译后的 css 文件，每次重新编译 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 插件，它允许您：

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

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