Grunt在服务器上观看LiveReload

Question

我正在服务器(非本地)上开发WordPress站点.每当我修改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 来监视目录中编译后的 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插件，它允许您：

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

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