Question

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

Gruntfile：

＆＃13;

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']);

};

＆＃13;

在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插件，该插件可让您：

每当添加，更改或删除观看的文件模式时运行预定义的任务

此插件包含许多其他用于实时重新加载，观看等的选项，您可能会觉得这些选项很有用。

Grunt在服务器上观看LiveReload

1 个答案: