grunt-contrib-watch + sass：如何指定目标文件？

Question

grunt-contrib-watch + sass：如何指定目标文件？

5

我有这个工作流程：

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
        }
    },
    watch: {
      files: ['src/*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};

在运行grunt watch并更改src/*.scss文件后，我得到了以下结果：

文件“src/main.scss”已更改。运行“sass：dist”（sass）任务

完成，无错误。完成于2016年2月2日星期二11:25:11 GMT+0100（CET） - 等待...

我的问题是：生成的文件在哪里？如何指定目标文件？

我也尝试使用以下工作流程：

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
          files: [{
            expand: true,
            cwd: 'src',
            src: ['*.scss'],
            dest: '.',
            ext: '.css'
          }]
        }
    },
    watch: {
      files: ['*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};

我正在运行grunt watch，但是当我更改src/*.scss时，没有任何反应。

编辑：这是我按照答案修改后的grunt文件：

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
          files: [{
            expand: true,
            cwd: '.',
            src: ['src/**/*.scss'],
            dest: '.',
            ext: '.css'
          }]
        }
    },
    watch: {
      files: ['src/**/*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};

- tirenweb

嘿，@ziiweb，这些解决方案有一个起作用了吗？ - suzumakes

3个回答

1

您需要指定一个输出：

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  grunt.initConfig({
  sass: {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        //output added here
        'dist/main.css' : 'src/*.scss'
      }
    }
  },
  watch: {
    files: ['src/*.scss'],
    tasks: ['sass']
  }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ["sass"]);
};

请注意grunt-sass应该也支持所有标准配置选项。

使用您的原始配置，任务成功运行，但找不到要处理的文件。如果我使用grunt --debug --verbose运行，则会得到：

[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js

Running "sass:dist" (sass) task
[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js
Verifying property sass.dist exists in config...OK
File: [no files]

我想你可以把这看作是 grunt-sass 中的一个 bug。

- ed.

1

你的问题中第二个grunt任务配置中grunt watch没有被触发的原因是，被监视的文件路径有误。

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

这只监视项目根目录中所有的.scss文件（不包括像src这样的任何文件夹内部）。您需要将files路径设置为与您问题中的第一个grunt任务配置相同，并且它应该可以工作。

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

注意：如果在src文件夹下有子文件夹包含.scss文件，则需要在watch的files数组中更改模式为src/**/*.scss，并在sass的files对象中更改为src：['**/*.scss']。

此外，在第二个grunt配置中，对于sass任务，files对象的dest选项设置为。。这会在项目的根目录生成CSS文件。要在src或其他文件夹内生成它们，请相应地指定。

您可以在 https://github.com/pra85/grunt-sass-example 查看工作示例（检查子文件夹分支以处理包含SASS文件的src中嵌套文件夹的情况）

- Prayag Verma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- suzumakes · Accepted Answer

假设您有一个名为main.scss的文件，并且从layout文件夹中的_sassfile.scss进行@import。听起来不错吧？

sass: {
    options: {
      sourceMap: true,
      outFile: 'dist/main.css.map'    // so you get a sourceMap file
    },
    dist: {
      files: {
        'dist/main.css' : 'src/main.scss'
      }
    }
  },
  watch: {
    files: ['src/layout/*.scss'],
    tasks: ['sass']
  }

这意味着 grunt watch 将监控个别组件的sass/scss文件的更改，然后运行 sass 任务，将所有内容处理到 dist/main.css。

如果您只使用1个Sass文件，即main.scss是您唯一的文件，或者如果您将其他_partial.scss Sass文件放在同一个目录中，您可以保持watch命令不变。

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

最后一件事。你的Sass文件的当前工作目录cwd，src/不会传递到你为watch指定的files。所以在第二个工作流中，你的Gruntfile会在src/上面的一个目录中寻找文件更改。