1

我是使用 Grunt 工具的新手，我正在执行视频中说的步骤，但是我遇到了一些错误并从头开始，但是现在我遇到了这个问题，当我在中键入命令“grunt”时项目文件夹目录中的 CMD 一切正常，但在分发文件夹目录“dist/scripts”中没有创建 JavaScript 文件，甚至没有生成 Uglify。

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

相反，我被替换为 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']);
};

需要帮助请！！

4

1 回答 1

0

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

于 2016-12-21T03:04:37.867 回答