Coursera - AngularJS第2周问题js&我输入grunt命令后没有创建css文件

时间:2016-12-19 13:15:36

标签: angularjs angular gruntjs grunt-usemin gruntfile

我是使用Grunt工具的新手,我正在按照视频说的那样做,但我遇到了一些错误,并从一开始就重新开始,但现在我正面临这个问题,当我输入命令" grunt"在项目文件夹目录中的CMD中我得到了一切,但是在分发文件夹目录中没有创建JavaScript文件" dist / scripts",甚至没有生成Uglify。

在教师输入命令grunt之后的视频中,在dist / scripts目录中创建了一个JS文件,其名称为" main.6c5adb2140e008f7bb85.js ",并且创建了css文件dist / styles目录名称为" main.d1901e133950f2e3aeae.css ",并且在他的终端中,它被替换为1对资产的引用,并且生成的Uglify如图所示: Uglify Generated

相反,我将0替换为资产,并且未生成uglify:

Grunt command issue

我按顺序完成了视频中的所有安装命令,并创建了所有文件(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']);
};

需要帮助!!

1 个答案:

答案 0 :(得分:0)

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