Search code examples
angularjsangulargruntjsgrunt-usemingruntfile

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


I'm new in using Grunt tool, I was doing the steps like the video said, but i faced some errors and started from the whole beginning again, but now i'm facing this issue, when i type the command "grunt" in the CMD in the directory of the project folder i get everything good, but there is no JavaScript file created in the distribution folder directory "dist/scripts", and even the Uglify is not generated.

In the video after the instructor typed the command grunt a JS file created in dist/scripts directory with name "main.6c5adb2140e008f7bb85.js", and css file created in dist/styles directory with name "main.d1901e133950f2e3aeae.css", and also in his terminal it was written replaced 1 reference to assets and Uglify generated like in the picture: Uglify Generated

Instead i get replaced 0 references to assets and the uglify is not generated:

Grunt command issue

I did all the installation command that in the video by order, and i created all the files (package.json, Gruntfile.js, app.js, .jshintrc) after that i added the usemin to the require jit-grunt and added it to the registerTask. Here's the Gruntfile.js source code:

'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']);
};

Need help please !!


Solution

  • it's look like there is no mistake in the commands that 've wrote but the mistake here is the name of the html in my project folder is not the same name which is "menu.html" and i wrote it in Gruntfile "meun.html" that's why it doesn't create the js & css file !!