css - 使用 Libsass/Grunt 时有没有办法实时查看文件？

Question

我已经使用

安装了 Foundation 5

>gem install foundation  

然后使用命令创建一个新元素

>foundation scratch --libsass 

主要原因是我在 Windows 上，我真的不需要/不想使用指南针。我知道在我更改我的 sass 文件后我可以运行

>grunt build 

为了根据我对 .scss 文件所做的更改来更新我的 css 文件。一切正常。

问题:有没有一种方法可以监视这些 .scss 文件，这样我就不必在每次保存文件时都运行该命令。有点像我以前用 >compass watch 做的事？ package.json 中有一个名为 grunt-contrib-watch 的开发依赖项，是吗？如果是这样，我该如何使用它？

这是安装完成后的 Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },

    watch: {
      grunt: {
        options: {
          reload: true
        },
        files: ['Gruntfile.js']
      },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

如果有人可以提供帮助，请提前致谢!

Answer 1

好吧，所以我做了一些侦查并查看了 grunt 文件，尽管我对 grunt 不是很好，但我看到了这个:

watch: {
    grunt: {
        options: {
            reload: true
        },
        files: ['Gruntfile.js']
    },

    sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
    }
}

有了这个，我假设我可以运行:

>grunt watch

我知道，我可能不是棚子里最聪明的工具，但我是新手，没有意识到当我以这种方式安装 Foundation 时它也安装了这个 grunt-contrib-watch 依赖。抱歉，如果这个问题太明显，也许它会对某人有所帮助，因为即使它在我不习惯使用的 package.json 中，我也很难找到答案。