node.js - Concat bower components with grunt

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

node.js - Concat bower components with grunt

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

421 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:45:42+0000

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>

Categories

node.js - Concat bower components with grunt

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags