带bower和grunt的Javascript包管理

Question

因此，在我的项目中，我的javascript包括

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

相当标准的东西。

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

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

bower插件将创建一个文件夹，如

vendorjs

 - bootstrap.js
 - jquery.js
 - etc

然后，concat将从这个dir中读取，并且由于文件是按字母顺序组合的，它们将以错误的顺序组合在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-cont肋骨-concat中指定文件的顺序：

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