用bower和grunt进行Javascript包管理

时间:2013-06-20 11:58:07

标签: gruntjs concat bower uglifyjs

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

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

非常标准的东西。

我的目标是找到一种可靠的自动化方式,将我所有单独的javascript文件(大约25个文件)缩小为一个文件进行制作。

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

bower插件将创建一个像

这样的文件夹
vendorjs

 - bootstrap.js
 - jquery.js
 - etc
然后

concat将从这个目录中读取,并且因为文件按字母顺序排列将以不正确的顺序组合它们,在jquery之前引导,所以它不会被使用。

我知道RequireJS,但对我的需求似乎有些过分。而且似乎我需要重写我的所有j以符合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']
            }
        }
    }
});

};

1 个答案:

答案 0 :(得分:2)

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

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