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.
4

1 回答 1

39

你问题的第一部分很简单。Live reload仅重新加载您在配置中指定的文件；即，如果您指定 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的任何项目中显示这些目录，然后我再也不会详细地运行该命令。

于 2013-09-25T18:00:38.323 回答