Concat和minify Bootstrap js

Question

我使用Bootstrap搭建一个项目，使用Grunt构建用于生产的文件。

我是否应该合并和缩小js文件。

我尝试过这样做，但是js文件停止工作。

更多的解释：

我正在开发一个Wordpress主题，使用Bootstrap和Grunt来缩小css和js用于生产。

我有一个dev主题和一个dist主题。

在开发主题中，我有一个js文件夹，里面有bootstrap js和一个包含主题的js的project.js文件。

在Wordpress my project.js works中使用开发主题(页面加载时的简单测试警报)。

在grunt文件中，我在complete.js中将所有的js文件连接在一起。这是可行的，我有一个包含所有js的文件。

然后，我将缩小js并将其复制到dist-theme中以生成complete.min.js。

在dist主题中，我引用了complete.min.js，但我的警告不再起作用。

dev-doesn js文件夹中还包含了在dev-doesn中工作的moderniser，但是在拼接和缩小之后，它在dist-doesn中不起作用。

我的呼叫声文件。

'use strict';

module.exports = function(grunt){

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        yeoman:{
            dev: 'dev-theme',
            dist: 'dist-theme'
        },

        jshint: {
      files: ['dev-theme/js/*.js'],//all files with .js
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },

        sass:{
            dist:{
                files:{
                    'dev-theme/css/styles.css' : 'dev-theme/css/bootstrap.scss'
                }
            }
        },

        cssmin : {
            css:{
            src: 'dev-theme/css/styles.css',
        dest: 'dist-theme/css/styles.min.css'
        }
    },

        concat:{
            dist:{
                src:['dev-theme/js/**/*.js'],
                dest:'dev-theme/js/complete.js'
            }
        },

        uglify : {
            js: {
                src: ['dev-theme/js/complete.js'],
        dest: 'dist-theme/js/complete.min.js'
      }
        },

        watch:{

            css:{
                files: 'dev-theme/css/**/*.scss',
                tasks:['sass'],
                options:{
                    livereload: true
                }
            },

            js:{
                files:'dev-theme/js/**/*.js',
                tasks:['jshint'],
                options:{
                    livereload: true
                }
            }

        },

        clean: {
        dist: {
            files: [{
                dot: true,
                src: [
                    //'.tmp',
                    'dist-theme/*',
                                        //don't clean
                                        '!dist-theme/style.css',
                                        '!dist-theme/screenshot.png',
                                        '!dist-theme/functions.php',
                ]
            }]
        }
    },


        copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: 'dev-theme',
                dest: 'dist-theme/',
                src: [
                    '*.{ico,txt}',
                    '.htaccess',
                    'images/{,*/}*',
                                        'fonts/{,*/}*',
                    '{,*/}*.html',
                                        '{,*/}*.php',

                                        //don't clean
                                        '!functions.php',
                ]
            }]
        }
    }                       
    });

    grunt.registerTask('default', ['watch']);
    grunt.registerTask('build', ['clean:dist','cssmin','concat','uglify','copy:dist']);
    grunt.registerTask('webfont', ['webfont']);

} 

Answer 1

一些脚本需要按顺序加载。使用glob并不能保证正确的顺序。因此，如果通用concat全局返回的文件数组按字母顺序排列，则bootstrap.js将在其依赖项之前加载。这可不好！

我会更改concat块，使其看起来像这样：

concat:{
  dist:{
    src:[
          'dev-theme/js/modernizr.js',
          'dev-theme/js/bootstrap.js',
          'dev-theme/js/**/*.js'
        ],
    dest:'dev-theme/js/complete.js'
  }
},

如果您使用的不是WordPress附带的jQuery版本，则需要将其添加到src列表中。