Grunt watch pattern.indexOf 不是一个函数答案

【问题标题】：Grunt watch pattern.indexOf is not a functionGrunt watch pattern.indexOf 不是一个函数
【发布时间】：2016-08-28 06:45:38
【问题描述】：

我正在尝试使用 Grunt 的 grunt-contrib-watch 插件来监视一些文件，然后运行任务，这正是它的用途，这是我的 Gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            options: {
                sourceMap: true,
                outputStyle: 'compressed'
            },
            dist: {
                files: {
                    'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss',
                    /*'bower_components/foundation-sites/dist/foundation.min.css': 'bower_components/foundation-sites/scss/foundation.scss'*/
                }
            }
        },
        uglify: {
            dist: {
                files: {
                    'static/javascript/main.min.js': 'static/javascript/main.js'
                }
            }
        },
        watch: {
            files: [
                '<%= sass.dist.files %>',
                '<%= uglify.dist.files %>'
            ],
            tasks: [
                'sass',
                'uglify'
            ]
        }
    });

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

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

当我运行它时，它一遍又一遍地运行，当我停止它时，我看到我有这样的消息：

运行“监视”任务等待... 警告：pattern.indexOf 不是函数

我真的不知道有什么问题。有人知道这里发生了什么吗？

更新：

显然，问题出在我调用文件的方式上，因为我将其更改为：'static/stylesheets/sass/*.scss' 并且效果很好，但我想知道为什么其他方式不起作用行不通，因为我认为这是一种更有用的方法。

【问题讨论】：

标签： javascript gruntjs grunt-contrib-watch

【解决方案1】：

grunt-contrib-watch 期望单个模式字符串或模式字符串数组作为其files 配置的值。但是，您在配置中使用的模板评估为对象。您的 watch.files 值计算结果如下：

files: [
    { 'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss' },
    { 'static/javascript/main.min.js': 'static/javascript/main.js' }
]

当模式匹配尝试运行时，它会失败，因为对象上没有 indexOf 方法。由于 grunt-contrib-watch 永远运行，存在一个无限循环的尝试和失败构建被监视文件的列表。

您通常会使用以下内容配置您的监视文件：

files: [
    'static/**/*.scss',
    'static/**/*.js'
]

但上述情况会导致您的情况出现问题，因为您的缩小 JS 文件与源 JS 文件位于同一文件夹中。您可能可以通过将'!static/**/*.min.js' 添加到您的文件数组来解决此问题，但更好的解决方案是将所有已编译的文件放入一个单独的文件夹中。

【讨论】：

【解决方案2】：

从对象中提取值：

watch: {
    files: [
        '<%= sass.dist.files.values() %>',
        '<%= uglify.dist.files.values() %>'
    ],

【讨论】：

values() 需要进入<%= %>，例如<%= sass.dist.files.values() 让它工作。
@applemonkey496 谢谢，已修复。