gruntjs - Grunt 在服务器上现场观看 LiveReload

Question

我正在服务器(非本地)上开发 WordPress 站点。每当我修改 sass 文件时，我都想刷新浏览器中的页面。我列出了一些繁重的任务，但现在我只想在任何 sass 修改时刷新它。现在，每当修改文件时它都会捕获，但不会刷新页面。

咕噜文件:

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插件，它允许您:

Run predefined tasks whenever watched file patterns are added, changed or deleted

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