Javascript GrunFile中止文件

我已经下载了基础5，但是在默认配置中添加了插件问题。我从控制台的角度理解插件的安装。但是，在包含并注册任务之后，我很难正确地编写Gruntfile.js

'use strict';

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

    watch: {
      options: {
          livereload: true
      },

      css: {
        files: {
            'css/app.css': 'scss/apps.css',
            'css/custom.css': 'scss/custom.scss'
        },
        tasks: ['sass', 'concat'],
        options: {
            spawn: false,
        }
      },

      scripts: {
        files: ['js/dev/*.js'],
        tasks: ['jshint', 'concat', 'uglify'],
        options: {
            spawn: false,
        }
      }
    },

    sass: {

      options: {
        includePaths: ['bower_components/foundation/scss']
      },

      dist: {
        options: {
          outputStyle: 'nested'
        },

        expand: true,
        cwd: 'scss/',
        src: {
            'css/app.css': 'scss/apps.css',
            'css/custom.css': 'scss/custom.scss'
        },
        dest: 'css/',
        ext: '.css'    
      }
    },

    jshint: {
      src: ['Gruntfile.js', 'js/dev/script.js'],
      options: {
        jshintrc: '.jshintrc',
      }
    },

    uglify: {
        build: {
            files: {
                'js/dev/plugins/*.js': ['js/dev/plugins.min.js'],
                'js/dev/script.min.js': ['js/dev/script.min.js']
            }
        }
    },

    concat : {
        bar: {
            'js/dev/script.min.js': ['js/build/script.min.js?<%= pkg.version %>']
        }
    },

    imagemin: {  
        static: {  
          options: {
            optimizationLevel: 3
          },
          files: {                         
            'lossy-images/*.png': 'images/*.png', 
            'lossy-images/*.jpg': 'images/*.jpg',
            'lossy-images/*.gif': 'images/*.gif'
          }
        },
        dynamic: {                         
          files: [{
            expand: true,                  
            cwd: 'images/',                   
            src: ['**/*.{png,jpg,gif}'],   
            dest: 'lossy-images/'                  
          }]
        }
      }

  });

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

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch', 'jshint', 'concat', 'uglify', 'imagemin']);
};

Grunfile.js

'use strict';

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

    watch: {
      options: {
          livereload: true
      },

      css: {
        files: {
            'css/app.css': 'scss/apps.css',
            'css/custom.css': 'scss/custom.scss'
        },
        tasks: ['sass', 'concat'],
        options: {
            spawn: false,
        }
      },

      scripts: {
        files: ['js/dev/*.js'],
        tasks: ['jshint', 'concat', 'uglify'],
        options: {
            spawn: false,
        }
      }
    },

    sass: {

      options: {
        includePaths: ['bower_components/foundation/scss']
      },

      dist: {
        options: {
          outputStyle: 'nested'
        },

        expand: true,
        cwd: 'scss/',
        src: {
            'css/app.css': 'scss/apps.css',
            'css/custom.css': 'scss/custom.scss'
        },
        dest: 'css/',
        ext: '.css'    
      }
    },

    jshint: {
      src: ['Gruntfile.js', 'js/dev/script.js'],
      options: {
        jshintrc: '.jshintrc',
      }
    },

    uglify: {
        build: {
            files: {
                'js/dev/plugins/*.js': ['js/dev/plugins.min.js'],
                'js/dev/script.min.js': ['js/dev/script.min.js']
            }
        }
    },

    concat : {
        bar: {
            'js/dev/script.min.js': ['js/build/script.min.js?<%= pkg.version %>']
        }
    },

    imagemin: {  
        static: {  
          options: {
            optimizationLevel: 3
          },
          files: {                         
            'lossy-images/*.png': 'images/*.png', 
            'lossy-images/*.jpg': 'images/*.jpg',
            'lossy-images/*.gif': 'images/*.gif'
          }
        },
        dynamic: {                         
          files: [{
            expand: true,                  
            cwd: 'images/',                   
            src: ['**/*.{png,jpg,gif}'],   
            dest: 'lossy-images/'                  
          }]
        }
      }

  });

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

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch', 'jshint', 'concat', 'uglify', 'imagemin']);
};

.jshitrc目录

{
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "sub": true,
  "undef": true,
  "boss": true,
  "eqnull": true,
  "node": true,
  "browser" : true,

    "globals": {
      "jQuery": true,
      "require" : true,
      "define" : true,
      "requirejs" : true,
      "describe" : true,
      "expect" : true,
      "it" : true,
      "module" : true,
    }
}

Livereload-html代码

<script src="//localhost:35729/livereload.js"></script>

结论:

实时重新加载不起作用（我已经安装了chrome扩展）。我收到以下错误：

Running "sass:dist" (sass) task
Warning: Object #<Object> has no method 'indexOf' Use --force to continue.

Aborted due to warnings.

运行“sass:dist”（sass）任务
警告：对象#没有使用“indexOf”方法--强制继续。
由于警告而中止。

我还没有包括compass/Autoprefixer以满足我的混音需求。如果您花时间滚动或阅读，谢谢

---

我欢迎任何帮助

您应该尝试更改sass部分，如下所示：

sass: {
  dist: {
    options: {
      outputStyle: 'nested'
    },

    files: [         
      {src: 'css/app.css', dest: 'scss/apps.css'},
      {src: 'css/custom.css', dest: 'scss/custom.scss'}
    ]       
  }
}

---

关于文件对象格式选项的更多信息，您可以在这里找到：

谢谢，到目前为止效果很好，您能解释一下，dist/foo/bar之间的区别吗。我现在更好地理解了语法，但不确定调用文件和sass主大括号之间的子大括号。dist/foo/bar是节的唯一名称，它可能是ololol，也可能是tratata，这是唯一的名称，您可以使用，例如sass:ololo。我如何运行开发版本（嵌套css）和生产版本（小型化）？