Question

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

的jQuery
jQueryUI的
AngularJS
粉底

我正在使用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中逐一列出它们。我怎么能成就这个？

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

感谢。

Answer 1

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

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>

Answer 2

“我的目标是获取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中那样）。

Concat凉亭组件与咕噜声

2 个答案: