Concat bower components with grunt

后端未结

关注

 2  1007

生来不讨喜

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

jQuery
JQueryUI
AngularJS
Foundation

相关标签:

2条回答

谎友^

2020-12-08 06:12
"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).
0 讨论(0)
发布评论:

提交评论
- 加载中...

傲寒

2020-12-08 06:29

usemin is your friend here.

Install usemin, copy, concat and 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

Set up a build block in your HTML file:

<!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>

Set up your 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']);
};

Run grunt

grunt

Results:

├── 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>

0 讨论(0)