Grunt Uglify Loop

Question

I'm still rather new to Grunt so maybe someone with more experience can help me with this. For some reason anytime I run grunt watch the uglify task is getting executed multiple times so my scripts.min.js file is getting compiled multiple times.

This is what my Gruntfile.js currently looks like:

'use strict';
module.exports = function(grunt) {
  // Show elapsed time
  require('time-grunt')(grunt);

  // Comment out any unused components
  var jsFiles = [
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/button.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js',
    'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
    //'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
    'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js',
    'assets/js/*.js'
  ];

  // Configure tasks.
  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'assets/css/main.min.css': 'assets/sass/app.scss',
          'assets/css/custom-login.min.css': 'assets/sass/_login.scss',
          'assets/css/magnific.min.css': 'assets/sass/plugins/magnific/magnific.scss'
        }
      }
    },
    uglify: {
      dist: {
        files: {
          'assets/js/scripts.min.js': [ jsFiles ]
        }
      }
    },
    watch: {
      sass: {
        files: [ 'assets/sass/*.scss' ],
        tasks: [ 'sass' ]
      },
      js: {
        files: [ jsFiles ],
        tasks: [ 'uglify' ]
      }
    }
  });

  // Load tasks.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');

  // Register tasks.
  grunt.registerTask('default', [
    'watch',
    'sass',
    'uglify'
  ]);
};

Anyone have any ideas why the uglify task is executing multiple times?

Answer 1

The problem is that you have all the js files to inspect and minify. The main problem is:

'assets/js/*.js'

You are compressing all the js files, but also you are watching then, so when you uglify all the js files, they changed, and for that reason the watch task executes and minify again....and that's the infinite loop.

You should change your gruntfile, for example removing scripts.min.js of the assets folder, or removimg assets/js/*.js and adding manually all your js files. I recommend apply the second one.

'use strict';
 module.exports = function(grunt) {
 // Show elapsed time
 require('time-grunt')(grunt);

 // Comment out any unused components
 var jsFiles = [
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/button.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js'
];

// Configure tasks.
grunt.initConfig({
sass: {
  dist: {
    options: {
      style: 'compressed'
    },
    files: {
      'assets/css/main.min.css': 'assets/sass/app.scss',
      'assets/css/custom-login.min.css': 'assets/sass/_login.scss',
      'assets/css/magnific.min.css': 'assets/sass/plugins/magnific/magnific.scss'
    }
  }
},
uglify: {
  dist: {
    files: {
      'assets/js/scripts.min.js': [ jsFiles ]
    }
  }
},
watch: {
  sass: {
    files: [ 'assets/sass/*.scss' ],
    tasks: [ 'sass' ]
  },
  js: {
    files: [ jsFiles ],
    tasks: [ 'uglify' ]
  }
}
});

// Load tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');

// Register tasks.
grunt.registerTask('default', [
  'watch',
  'sass',
  'uglify'
]);
};

Regards.