Bower 和 GruntJS。将供应商 JavaScript 连接到一个文件中。答案

【问题标题】：Bower and GruntJS. Concatenating vendor JavaScript into one file.Bower 和 GruntJS。将供应商 JavaScript 连接到一个文件中。
【发布时间】：2014-07-29 19:40:07
【问题描述】：

我正在使用 Bower 和 GruntJS 开发一个静态网站。我使用 Bower 将软件包（例如 jQuery、Bootstrap、一些 Jquery 插件）安装到一个名为 src/_lib 的文件夹中，然后我使用 grunt-bowercopy 将我需要的脚本复制到一个“供应商”文件夹中。然后我使用 GruntJS 连接并缩小 javascript：

grunt.initConfig({
  concat: {
    dist: {
      src: ['vendors/*.js', 'js/*.js'],
      dest: 'src/script.js'
    }
  },

  uglify: {
    options: {
      banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
    },
    build: {
      src: 'src/js/script.js',
      dest: 'build/js/script.min.js'
    }
  },
});

我是否会冒险将所有 JavaScript 放入一个文件中来破坏某些 JavaScript 代码？有没有办法让 GruntJS 以 JQuery 开头，以防其他代码依赖于 JQuery？

【问题讨论】：

您只会获得与将它们全部包含在同一页面上相同的风险。如果 jQuery 必须排在第一位，只需将其作为 src 数组中的第一个元素即可。

标签： javascript gruntjs bower

【解决方案1】：

为了确保 javascript 文件以正确的顺序连接，我将 bower 目录中的相关 javascript 文件复制到另一个目录中。我使用grunt-bowercopy 来做到这一点。然后我使用grunt-contrib-concat，确保src 数组中的顺序正确。要测试它是否正常工作，请将以下 sn-p 放入 src/js/script.js 文件中：

$( document ).ready(function() {
    console.log( "ready!" );
});

我使用的完整的gruntfile如下：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowercopy: {
        options: {
            srcPrefix: 'src/_lib'
        },
        test: {
            options: {
              destPrefix: 'test/js',
            },
            files: {
              'jquery.js' : 'jquery/jquery.js',
              'bootstrap.js' : 'bootstrap/dist/js/bootstrap.js'
            },
        },
    },
    concat: {   
        dist: {
            src: [
                'test/js/jquery.js', 
                'test/js/bootstrap.js',
                'src/js/script.js',
            ],
            dest: 'test/js/scripts.js',
        }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'test/js/scripts.js',
        dest: 'build/js/scripts.min.js'
      }
    },    
  });

  // Load the plugins.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-bowercopy');
  grunt.loadNpmTasks('grunt-contrib-concat');

  // Default tasks.
  grunt.registerTask('default', ['bowercopy', 'concat', 'uglify']);

};

【讨论】：