Question

我正在使用Bower和GruntJS来开发静态网站。我使用Bower将软件包（例如jQuery，Bootstrap，一些Jquery插件）安装到名为src/_lib的文件夹中，然后使用grunt-bowercopy将我需要的脚本复制到'vendor'文件夹中。然后我使用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？

Answer 1

为了确保javascript文件以正确的顺序连接，我将相关的javascript文件从bower目录复制到另一个目录中。我用grunt-bowercopy来做这件事。然后我使用grunt-contrib-concat，确保src数组中的顺序正确。要测试它是否正常工作，请将以下代码段放入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']);

};

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

1 个答案: