连接和缩小 Bootstrap js

Question

我正在使用 Bootstrap 构建项目，并使用 Grunt 构建用于生产的文件。

我应该连接和缩小 js 文件吗？

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

多一点解释：

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

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

在开发主题中，我有一个带有引导 js 的 js 文件夹和一个包含我的主题 js 的 project.js 文件。

在 Wordpress 中使用开发主题，我的 project.js 可以工作（页面加载时的简单测试警报）。

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

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

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

dev-theme js 文件夹还包含在 dev-theme 中工作的现代化工具，但在连接和缩小后在 dist-theme 中不起作用。

我的咕噜声文件。

'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 glob 返回的文件数组按字母顺序排列，则 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 列表中。