Question

我有一个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服务＆amp;观看html文件的变化。这些东西不能同时运行，这正是我试图做的事情。我碰巧找到了一个名为'load-grunt-tasks'的帮助程序，它允许通过将以下代码添加到gruntfile来运行并发任务：

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

Answer 1

首先是一些常规故障排除：

您确定所有依赖项都已正确安装吗？ npm install
所有依赖项都是最新的吗？ npm update
我看到你正在使用Jekyll，为什么要在这一点上介绍Grunt？ Jekyll有自己的watch任务。这可能会产生一些错误。

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

这看起来有点让我失望。 watch与files: [...]的关系是什么？在观看这些文件时没有任务要执行。您没有任何可以修改grunt tasks，.html或.md文件的.yml，那么为什么要列出它们呢？

除此之外，它看起来很好。

Answer 2

你有没有理由为此使用Grunt？ Jekyll带有一个非常优秀的Sass观察者，如果你想进行任何进一步的前/后处理任务，你可以使用Jekyll的插件系统。

您可以将.scss / .sass个文件放在_sass中，然后从位于其他任何地方的.scss / .sass文件中调用它们YAML前线。

一个常见的结构是这样的：

- _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
}

就插件而言，我正在使用octopress-autoprefixer自动为CSS3属性添加前缀。使用此插件的过程如下：

gem install octopress-autoprefixer
将此添加到您的_config.yml：
```
gems:
  - octopress-autoprefixer
```
就是这样。

现在，当您对Sass进行任何更改时，在_site/中生成CSS文件后，autoprefixer将为他们带来魔力。

Grunt SASS Watch无法正常工作

2 个答案: