如何在不刷新整个页面的情况下使Grunt/Watch/LiveReload重新加载Sass/CSS？

Question

如何在不刷新整个页面的情况下使Grunt/Watch/LiveReload重新加载Sass/CSS？

30

目前为止，我已经按照自己的意愿使所有东西都运转良好（这包括监测我想要的所有文件并在更改时进行刷新），除了我希望能够修改Sass/CSS并且在浏览器中刷新而不需要重新加载页面。这不是什么大问题，但有时候我会在某些页面交互后尝试修改某些东西的样式，如果页面刷新，我需要再次进行整个过程。

我相当确定这是可能的，但它一直让我无法实现。

这是我的 Gruntfile.js：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      css: {
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
    }
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Default task(s).
  grunt.registerTask('default', ['connect', 'watch']);

};

关于我的设置，有一件奇怪的事情我想要提到：当我运行grunt watch --verbose时，我发现它同时监控了.git和.sass-cache。这是正确的吗？我不知道我做了什么使它这样。

Watching .git for changes.
Watching .sass-cache for changes.

- Trey Piepmeier

1个回答

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

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

- Ben · Accepted Answer

你的问题的第一部分足够简单。实时重载只会重新加载您在配置中指定的文件; 例如，如果您指定了sass文件，则只会重新加载这些文件。我通过让Grunt监视位于我的dist目录中的css文件来解决了此问题，这显然每次重新编译Sass时都会更改。

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: []
  }
}

我不确定第二个问题。对于任何项目，grunt watch --verbose没有显示那些目录，但我从未以详细模式运行该命令。