gruntjs - 使用 Bower 和 grunt 进行 Javascript 包管理

Question

所以在我的项目中我的 javascript 包含

• 第三方库(jquery、bootstrap、jquery 插件等)
• 自定义库
• 代码内联嵌入在 <script>$(function(){});</script> 之间的 View 文件中的 html 中

非常标准的东西。

我的目标是找到一种可靠的自动化方法，将所有单独的 javascript 文件(大约 25 个文件)缩小为一个文件以进行生产。

我已经安装了bower这似乎是让我的外部库保持最新状态的好方法。我还安装了grunt 。我在 grunt 中使用 Bower 插件，将所有下载的文件复制到指定目录，然后 concat可以查看该目录以将它们组合起来，最后 uglifyJS缩小文件。同样，这似乎是 grunt 的标准设置。

bower 插件将创建一个类似的文件夹

vendorjs

 - bootstrap.js
 - jquery.js
 - etc

concat然后将从这个目录中读取，并且由于文件是按字母顺序排列的，因此将以不正确的顺序组合它们，在 jquery 之前引导，所以它不会有用。

我知道 RequireJS，但它对于我的需求来说似乎有点过分了。而且似乎我还需要重写所有 js 以符合 RequireJS 的要求。

是否有一些我缺少的配置可以帮助解决我的问题？我是否以错误的方式处理这个问题？

---

编辑这是我的 Gruntfile.js，以便更加清晰。

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bower: {
        dev: {
            dest: 'vendorjs',
            options: {
                stripJsAffix: true
            }
        }
    }
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            src: ['vendorjs/*.js'],
            dest: 'vendor.js'
        }
    },
    uglify: {
        dist: {
            files: {
                '../../public/js/admin/vendor.min.js': ['vendor.js']
            }
        }
    }
});

};

Answer 1

我不确定您的配置是什么样的，但您可以轻松指定 grunt-contrib-concat 中的文件顺序:

grunt.initConfig({
  concat: {
    dist: {
      src: ['src/jquery.js', 'src/bootstrap.js'],
      dest: 'dist/built.js'
    }
  }
});