Concat凉亭组件与咕噜声 [英] Concat bower components with grunt

问题描述

我正在构建一个需要很少前端lib /框架的应用程序，例如：

• jQuery


• JQueryUI


• AngularJS


• 基金会





我正在使用 bower 来下载组件。这时我的HTML看起来像：



 < script src =components / jquery / jquery.js>< /脚本> 
< script src =components / angular / angular.js>< / script> 
< script src =components / etc / etc.js>< / script> 
  

我的目标是制作一个 grunt 脚本它会自动获取安装的组件，并将它们缩小并将它们输出为 lib.js 。





问题：





在我所有的研究中，我都知道如何将所有来自目录的文件。
我的目标是获取凉亭组件并将它们连接起来，而不必在gruntfile中逐一列出它们。我可以如何获得这个？





也可以使用我想要的模块来创建自定义jQuery UI构建，而不是整个UI。





谢谢。


解决方案




我的目标是获取凉亭组件并将它们连接起来，而不必在gruntfile中逐一列出它们




您可以从您的依赖关系目录中获取所有JavaScript文件和子目录，并将它们连接在一起：



  grunt.config（'concat.mydeps'，{
文件：[{
 src：['components / ** / *。js']，
 dest：'dist / lib.js'
}] 
}）
  

...但是如果脚本执行的顺序很重要，那么这是一个灾难处理的方法:-) 。



另外，这些文件夹很可能会包含缩小和非缩小版本，这会导致您包含一些脚本两次...





避免这种副作用的方法如下：



  grunt.config（'concat.mydeps'，{ 
文件：[{
 src：['components / ** / *。js'，'！components / ** / * min.js']，
 dest：'dist / lib .js'
}] 
}）
  

...但是，这当然不是防弹 - 一个给定的组件可能会有一个建设版本和一个拆分源代码。





恕我直言，唯一明智的方法是明确列出您需要的文件按您需要的顺序进行汇总（就像您现在在您的HTML中所做的一样）。




I'm building an application which require few front-end lib/frameworks such as:

• jQuery
• JQueryUI
• AngularJS
• Foundation

I'm using bower to download the components. At this moment my HTML looks like:

<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>

My goal is to make a grunt script which automatically takes the installed components, concat and minify them and output them as lib.js.

Questions:

With all my researches I figure out how to concat all files from a directory. My goal here is to get the bower components and concat them without listing them one by one in the gruntfile. How I can archieve this?

Also Is it possible to make a custom jQuery UI build with just the modules I want instead of having the entire UI.

Thanks.

解决方案

"My goal here is to get the bower components and concat them without listing them one by one in the gruntfile"

You can take all javascript files from your dependencies directory and sub-directories, and have them concatenated that way:

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js'],
    dest: 'dist/lib.js'
  }]
})

... but if the order of script execution is important, this is a recipe for disaster :-).

Also, it's quite likely that these folder would contain minified and non minified versions, leading you to include some scripts twice...

A way to avoid that side effect would be in the line of:

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js', '!components/**/*min.js'],
    dest: 'dist/lib.js'
  }]
})

... but again, this is certainly not bulletproof - a given component may very well have a builded version, and a splitted source alongside.

IMHO, the only sane way out is to list explicitly the files you want aggregated, in the order you need (just like you do in your html for now).

这篇关于Concat凉亭组件与咕噜声的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！