Dee*_*psy 11 concatenation minify node.js gruntjs bower
我正在构建一个需要很少前端库/框架的应用程序,例如:
我正在使用bower下载组件.此时我的HTML看起来像:
<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>
我的目标是创建一个grunt脚本,自动获取已安装的组件,连接并缩小它们并将其输出为lib.js.
问题:
通过我的所有研究,我弄清楚如何从目录中连接所有文件.我的目标是获取bower组件并连接它们,而不是在gruntfile中逐一列出它们.我怎么能成功呢？
是否可以使用我想要的模块而不是整个UI来制作自定义jQuery UI构建.
谢谢.
ste*_*eax 35
usemin是你的朋友.
安装usemin,copy,concat和uglify:
npm install --save-dev grunt-usemin
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-uglify
在HTML文件中设置构建块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usemin</title>
<!-- build:js lib.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>
<!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>
设置你的Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
dist: {
files: [ {src: 'index.html', dest: 'dist/index.html'} ]
}
},
'useminPrepare': {
options: {
dest: 'dist'
},
html: 'index.html'
},
usemin: {
html: ['dist/index.html']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};
跑咕噜声
grunt
结果:
??? Gruntfile.js
??? components
? ??? angular
? ? ??? angular.js
? ??? etc
? ? ??? etc.js
? ??? jquery
? ??? jquery.js
??? dist
? ??? index.html
? ??? lib.js
??? index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usemin</title>
<script src="lib.js"></script>
</head>
<body>
<h1>usemin</h1>
</body>
</html>
"我的目标是获取bower组件并将它们连接起来,而不是在gruntfile中逐一列出它们"
您可以从依赖项目录和子目录中获取所有javascript文件,并将它们连接起来:
grunt.config('concat.mydeps', {
files: [{
src: ['components/**/*.js'],
dest: 'dist/lib.js'
}]
})
...但是如果脚本执行的顺序很重要,那么这就是灾难的秘诀:-).
此外,这些文件夹很可能包含缩小版和非缩小版,导致您包含一些脚本两次...
避免这种副作用的方法是:
grunt.config('concat.mydeps', {
files: [{
src: ['components/**/*.js', '!components/**/*min.js'],
dest: 'dist/lib.js'
}]
})
......但同样,这肯定不是防弹的 - 给定的组件可能很好地具有构建版本,并且还有一个分裂的源.
恕我直言,唯一明智的出路是按照你需要的顺序明确列出你想要聚合的文件(就像你现在在html中那样).