Coursera - AngularJS 第 2 周问题 js & css 文件在我键入 grunt 命令后未创建

Question

我是 Grunt 工具的新手，我按照视频中所说的步骤进行操作，但遇到了一些错误并从头开始，但现在我遇到了这个问题，当我输入命令"grunt"在项目文件夹目录中的CMD我得到一切都很好，但是在分发文件夹目录"dist/scripts"中没有创建JavaScript文件，甚至没有生成Uglify .

在视频中，讲师键入命令 grunt 在 dist/scripts 目录中创建了一个名为“main.6c5adb2140e008f7bb85.js”的 JS 文件，并且 css 文件在 dist/styles 目录中创建，名称为“main.d1901e133950f2e3aeae.css”，并且在他的终端中，它被替换为对资产和 Uglify 的 1 个引用生成如图所示：

相反，我被替换为 0 个对资产的引用并且未生成 uglify:

我按顺序执行了视频中的所有安装命令，并创建了所有文件（package.json、Gruntfile.js、app.js、.jshintrc）之后我将 usemin 添加到 require jit-grunt 并将其添加到 registerTask 中。这是 Gruntfile.js 源代码：

'use strict';

module.exports = function (grunt) {
    // Time how long tasks take. Can help when optimizing build times
    require('time-grunt')(grunt);

    // Automatically load required Grunt tasks
    require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin'
  });

    // Define the configuration for all the tasks
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Make sure code styles are up to par and there are no obvious mistakes
        jshint: {
            options: {
                jshintrc: '.jshintrc',
                reporter: require('jshint-stylish')
            },
            all: {
                src: [
                    'Gruntfile.js',
                    'app/scripts/{,*/}*.js'
                ]
            }
        },
      useminPrepare: {
        html: 'app/menu.html',
        options: {
          dest: 'dist'
        }
      },

      // Concat
      concat: {
        options: {
          separator: ';'
        },
        // dist configuration is provided by useminPrepare
        dist: {}
      },

      // Uglify
      uglify: {
        // dist configuration is provided by useminPrepare
        dist: {}
      },
      cssmin: {
        dist: {}
      },
      // Filerev
      filerev:{
        options: {
          encoding: 'utf8',
          algorithm: 'md5',
          length: 20
        },
        release: {
          // filerev: release hashes(md5) all assets (images, js and css)
          // in dist directory
          files: [{
              src: [
                  'dist/scripts/*.js',
                  'dist/styles/*.css',
              ]
          }]
        }
      },
      // Usemin
      // Replace all assets with their revved version in html and css files.
      // options.assetDirs contains the directories for finding the assets
      // according to their relative paths
      usemin: {
        html: ['dist/*.html'],
        css: ['dist/styles/*.css'],
        options: {
            assetsDirs: ['dist', 'dist/styles']
        }
      },

      copy: {
        dist: {
          cwd: 'app',
          src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
          dest: 'dist',
          expand: true
        },

        fonts: {
          files: [
            {
              //for bootstrap fonts
              expand: true,
              dot: true,
              cwd: 'bower_components/bootstrap/dist',
              src: ['fonts/*.*'],
              dest: 'dist'
            }, {
                  //for font-awesome
                  expand: true,
                  dot: true,
                  cwd: 'bower_components/font-awesome',
                  src: ['fonts/*.*'],
                  dest: 'dist'
              }
          ]
        }
      },

      clean: {
        build: {
          src: [ 'dist/']
        }
      }
    });

    grunt.registerTask('build', [
  'clean',
  'jshint',
  'useminPrepare',
  'concat',
  'cssmin',
  'uglify',
  'copy',
  'filerev',
  'usemin'
  ]);

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

需要帮助！！

Answer 1

看起来写的命令没有错误，但这里的错误是我的项目文件夹中 html 的名称与 "menu.html" 不同我在 Gruntfile "meun.html" 中写了它，这就是它不创建 js 和 css 文件的原因！

Coursera - AngularJS 第 2 周问题 js & css 文件在我键入 grunt 命令后未创建

Coursera - AngularJS week 2 Issue js & css file isn't created after i type grunt command

angularjs

gruntjs

grunt-usemin

gruntfile

angular