1

私は Grunt ツールを使用するのが初めてで、ビデオのように手順を実行していましたが、いくつかのエラーに直面し、最初からやり直しましたが、コマンド「grunt」を入力すると、この問題に直面していますプロジェクトフォルダのディレクトリにある CMD はすべてうまくいきますが、配布フォルダのディレクトリ「dist/scripts」に JavaScript ファイルが作成されておらず、Uglify も生成されていません。

インストラクターがコマンドを入力した後のビデオでは、「 main.6c5adb2140e008f7bb85.js 」という名前で dist/scripts ディレクトリに作成された JS ファイルと、「main.d1901e133950f2e3aeae.css」という名前で dist/styles ディレクトリに作成された css ファイル、さらに彼の端末では、アセットへの1つの参照を置き換えて書かれ、Uglifyは写真のように生成されました: 生成された醜い

代わりに、アセットへの 0 参照が置き換えられ、uglify は生成されません。

Grunt コマンドの問題

ビデオにあるすべてのインストール コマンドを順番に実行し、すべてのファイル (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 に答える