Grunt 丑化循环

Question

我对 Grunt 还是很陌生，所以也许有更多经验的人可以帮助我解决这个问题。出于某种原因，每当我运行grunt watch 时，uglify 任务都会被执行多次，因此我的 scripts.min.js 文件会被多次编译。

这是我的 Gruntfile.js 目前的样子：

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

有人知道为什么 uglify 任务会执行多次吗？

Answer 1

问题是您需要检查和缩小所有 js 文件。主要问题是：

'assets/js/*.js'

你正在压缩所有的 js 文件，但你也在观看，所以当你 uglify 所有的 js 文件时，它们发生了变化，因此 watch 任务再次执行并缩小......这就是无限循环.

您应该更改 gruntfile，例如删除 assets 文件夹的 scripts.min.js，或删除 assets/js/*.js 并手动添加所有 js 文件。我建议申请第二个。

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

问候。