Sass 咕噜沙斯手表坏了

我有一个grunt文件，如下所示。我遇到的问题是，当我更改.scss文件的内容时，grunt watch sass不会触发刷新。是否有明显的事情表明我做错了

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

    build : {
        dest: '_site'
    },

    sass: {
      dist: {
        options: {
          style: 'compressed',
          trace: true
        },
        files: {
          'css/main.css': '_scss/main.scss',
          'css/ie8.css': '_scss/ie8.scss',
          'css/ie9.css': '_scss/ie9.scss'
        }
      }
    },

    shell: {
      jekyllBuild: {
        command: 'jekyll build'
      },
      jekyllServe: {
        command: 'jekyll serve'
      }
    },

    watch: {
      files: ['_layouts/*.html', '*.md', '*.yml'],
      // SASS watch does not work  :(
      sass: {
        files: ['_scss/**/*.scss'],
        tasks: ['sass:dist'] // This should be sass'
      }
    }
  });

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

  // Compiles SASS, Builds Jekyll, and Serves Jekyll.
  grunt.registerTask('default', ['sass:dist', 'shell:jekyllBuild', 'shell:jekyllServe']);
}

另外，当我更改.scss文件时，终端指示文件已更改，但grunt watch sass未运行

Regenerating: 1 file(s) changed at 2015-08-05 13:14:50 ...done in 0.017384 seconds.

编辑：

我想出来了。我试图做的是使用grunt监视我的sass文件，并在进行更改时重新编译。我还希望jekyll提供服务，并观察html文件的变化。这些事情不能同时进行，这正是我试图做的。我碰巧找到了一个名为“load grunt tasks”的助手，它允许通过向GrunFile添加以下代码来运行并发任务：

concurrent: {
    serve: [
        'sass',
        'watch',
        'shell:jekyllServe'
    ],
    options: {
        logConcurrentOutput: true
    }
},

// Then register the following tasks
// Register the grunt serve task
grunt.registerTask('serve', ['concurrent:serve']);

// Then run the following from the terminal: 
grunt serve

---

首先，进行一些常规故障排除：

• 您是否确保所有依赖项都已正确安装<代码>npm安装
• 所有依赖项都是最新的吗<代码>npm更新
• 我知道你在用杰基尔，为什么在这一点上要引入格伦特？Jekyll有自己的

  watch

  任务。这可能会产生一些错误

---

我觉得这有点破了。

watch

应该如何处理

文件：[……]

？在监视这些文件时，没有要执行的任务。你没有任何可以修改

.html

、

.md

或

.yml

文件的

grunt任务

，那你为什么还要列出它们呢

---

除此之外，我觉得还不错。

你为什么要用Grunt呢？Jekyll附带了一个非常好的Sass观察程序，如果您想执行任何进一步的预处理/后处理任务，您可以使用Jekyll的插件系统来完成

您可以将

.scss

/

.sass

文件放在

\u sass

中，并从位于其他任何以YAML frontmatter开头的

.scss

/.sass文件调用它们

一个共同的结构应该是这样的：

- _scss/
  - normalize.scss
  - typography.scss
  - [whatever].scss
- assets/
  - main.scss

包含以下内容的

assets/main.scss

：

---
# You just need these --- lines to tell Jekyll to parse this file.
---

@import "normalize";
@import "typography";
@import [...]

// Other styles too
body {
  background-color: #f00;
  color: {{ site.branding.color }}; // Can even use Jekyll variables
}

至于插件，我正在使用它自动为CSS3属性添加前缀。使用此插件的过程如下：

gem安装octopress autoprefixer

将此添加到您的

\u config.yml

：

gems:
  - octopress-autoprefixer

就这样

---

现在，当您对您的Sass进行任何更改时，在

\u site/

中生成CSS文件后，autoprefixer将对它们发挥神奇的作用。

很有趣。我没能让它工作。互联网上有很多例子描述了使用grunt来解决这个问题。也许更大的问题是提供更好的b/c文档。我看到的许多示例都使用grunt。我发现了一些信息：即使将这个sass config参数添加到_config.yml中。什么也没发生。我的结构设置为/_scss/，应该输出到/css/，但它不起作用。目前，grunt方法可以工作，但更愿意以正确的方式进行。也可以作为一种测试，看看这是否有效。我从css/目录中删除了所有编译的文件，运行了jeykllserve，最后编辑并保存了一个sass文件。Jeykll注意到有一个文件被更改为“正在重新生成：1个文件”，但没有任何文件被编译到css/目录中。

gems:
  - octopress-autoprefixer