【问题标题】:When using Libsass/Grunt is there a way to watch files on the fly?使用 Libsass/Grunt 时,有没有办法即时观看文件?
【发布时间】:2015-07-28 00:10:39
【问题描述】:

我已经使用

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

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

【问题讨论】:

  • 为什么这是一个 SO 问题?你知道这个包 (grunt-contrib-watch) 只需查看 git 页面上的大量示例(包括如何查看 SASS 文件的示例)-github.com/gruntjs/grunt-contrib-watch#optionslivereload
  • 如果你注意到我在开始寻找答案时编辑了问题,所以一开始我不知道。我确实在 google 和 Stack overflow 上搜索了我认为会给我答案的内容,但结果很短。问题是有效的,无论答案多么明显,答案都是有效的。

标签: css sass gruntjs zurb-foundation-5 libsass


【解决方案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 中。

【讨论】:

  • 我不会删除答案或问题。我为此苦苦挣扎,仅仅因为我是一个菜鸟并且不了解事情是如何运作的,并不意味着其他人不会发现它有帮助,无论他们多么愚蠢(像我一样)。随心所欲地投反对票!
  • 我不知道谁对您投了反对票,但我有一个建议 - 从阅读您的回答来看,实际上并不清楚您原来的问题的 解决方案 是什么。也许如果您进行编辑以使其更清晰,它对其他人会更有用(顺便说一句,您在这里做了正确的事情,提供了答案,荣誉,不要灰心!)
  • 嗨,斯蒂芬,我明白你在说什么。这就是我在 SO 上发布问题时实际定义问题的原因。再次阅读这篇文章后,我意识到我有点模糊。我会看看我能做些什么来让这个问题更好地反映我遇到的问题。需要考虑的一件事是,我提出了这个问题,并且在第一次写作和发布时意识到存在 grunt-contrib-watch 依赖项。所以我将它包含在问题中,因为我觉得它很重要,直到在那之后我才意识到并发布了一个答案..
  • 太好了,太多关于 SO 的问题都被放弃了,很高兴看到有人积极关注提高质量。如果可以的话,我会再次紫外线:)
猜你喜欢
  • 1970-01-01
  • 2018-09-26
  • 2019-10-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-22
  • 2012-03-05
  • 1970-01-01
相关资源
最近更新 更多