使用gruntjs组合和缩小所有凉亭库 [英] Combine and minify all bower libraries with gruntjs
问题描述
有没有办法将所有已安装的库自动合并到一个文件中？
首先，我尝试了最基本的方法：将所有 .js 来自所有子目录的文件：
uglify：{
options：{compress ：true}，
my_target：{files：{$ b $'vendor.js'：['bower_components / ** / *。js']，
}}}
但这显然是一种不好的方法。由于错误太多，它也不起作用。
我手动删除了所有文件，并且只保存每个库都有的1个（主）文件，并且工作正常。
有没有办法自动完成这一切？
另外，建议这样做吗？ （即将所有供应商库合并到一个文件中）。 我推荐2个不错的grunt库的组合，Wiredep和Usemin：
Wiredep：在bower.json中自动识别bower.json中的所有依赖关系，并自动在您的html中使用。
Usemin：Detect all src里面的两个评论标签和所有来源都缩小并连接在dist文件夹中，下面是使用这个软件包的一个grunt文件的一个小例子，它基于角度对yeoman的生成器，这只是一个简短的咕噜声
Grunt
wiredep：{
选项：{
cwd：'appFolder'
}，
app：{
src：['htmlCollections']，
ignorePath：/\.\。 \ //
}
}，
useminPrepare：{
html：'htmlCollections'，
options：{
dest： distributionFolder'，
flow：{
html：{
steps：{'b $ b js：['concat'，'uglifyjs']，
css：['cssmin' ]
}，
发布：{}
}
}
}
}，
usemin：{
html：['distributionFolder + HtmlFiles']，
css：['distributionFolder + cssFiles']，
js：['distributionFolder + javascriptFiles']
}
$ b HTML c $ c><！doctype html>
< html lang =enng-app =MobileDevid =ng-app>
< head>
<！ - build：css（app）styles / vendor.css - >
<！ - - bower：css - >
//这将由bower中的依赖关系为grunt生成
<！ - endbower - >
<！ - endbuild - >
<！ - build：css（.tmp）styles / main.css - >
//这里的所有脚本都要在
中进行连接和缩小// dist文件夹的名称为main.css
< link type =text / css = stylesheethref =styles / app.css/>
<！ - endbuild - >
< / head>
< body>
<！ - build：js（app）scripts / vendor.js - >
<！ - - bower：js - >
//这将由bower
中的依赖关系为grunt生成//并且在发布中所有添加的bower组件都将通过
中的usemin进行缩小//vendor.js
< b< ;！ - endbower - >
<！ - endbuild - >
<！ - build：js（{。tmp，app}）scripts / scripts.js - >
//这个脚本中的所有脚本都将在dist
//文件夹中以脚本名称拼接和缩小。
< script type =text / javascriptsrc =脚本/ numero1\" >< /脚本>
< script type =text / javascriptsrc =scripts / numero2>< / script>
<！ - endbuild - >
< / body>
Is there a way to combine and minify all bower installed libraries into 1 file automatically?
First I tried the most basic approach: combine all .js files from all subdirectories:
uglify: {
options: {compress: true},
my_target: { files: {
'vendor.js': ['bower_components/**/*.js'],
} } }
But this is obviously a bad approach. It also doesn't work because of too many errors.
I manually deleted all the files and kept only 1 (main) file that each library has, and it worked.
Is there a way to do this all automatically?
Also, is it advisable to do it? (i.e. combine all vendor libraries into 1 file)
I recommend the combination of 2 nice grunt libraries, Wiredep and Usemin:
Wiredep: Load all dependencies of bower identified in bower.json inside your html automatically
Usemin: Detect all src inside two comments tags and all that source are minified and concatenated in dist folder, below are a little example of a grunt files using this packages, is based on the generator of angular to yeoman this is only a brief of that grunt
Grunt
wiredep: {
options: {
cwd: 'appFolder'
},
app: {
src: ['htmlCollections'],
ignorePath: /\.\.\//
}
},
useminPrepare: {
html: 'htmlCollections',
options: {
dest: 'distributionFolder',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
usemin: {
html: ['distributionFolder+HtmlFiles'],
css: ['distributionFolder+cssFiles'],
js: ['distributionFolder+javascriptFiles']
}
HTML
<!doctype html>
<html lang="en" ng-app="MobileDev" id="ng-app">
<head>
<!-- build:css(app) styles/vendor.css -->
<!-- bower:css -->
//This gonna be generated for the grunt by dependencies in bower
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
//All the script inside this gonna be concatened and minified in
//the dist folder by the name of main.css
<link type="text/css" rel="stylesheet" href="styles/app.css"/>
<!-- endbuild -->
</head>
<body>
<!-- build:js(app) scripts/vendor.js -->
<!-- bower:js -->
//This gonna be generated for the grunt by dependencies in bower
//And in distribution all bower components added gonna be minified by usemin in
//vendor.js
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
//All the script inside this gonna be concatened and minified in the dist
//folder by the name of scripts.js
<script type="text/javascript" src="scripts/numero1"></script>
<script type="text/javascript" src="scripts/numero2"></script>
<!-- endbuild -->
</body>
这篇关于使用gruntjs组合和缩小所有凉亭库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
