Geek Answers Handbook

Combine and minimize all bower libraries with gruntjs

Is there a way to combine and minimize all libraries that are installed in bower into 1 file automatically?

At first I tried the simplest approach: merge 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. This also does not work due to too many errors.

I manually deleted all the files and saved only one (main) file, which is in every library, and it worked.

Is there a way to do this all automatically?

Also, is it advisable to do this? (i.e. merge all vendor libraries into 1 file)

+7
bower gruntjs minify grunt-contrib-uglify
source share
2 answers

I recommend a combination of two good grunt libraries, Wiredep and Usemin:

Wiredep: automatically download all bower dependencies identified in bower.json inside your html

Usemin: finding all src inside two comment tags and this whole source is minimized and combined into a dist folder, below is a small example of grunt files using these packages, based on the yoman angular generator, this is just a short of this 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>
+12
source share

Just need wiredep

 uglify: { options: { compress: true }, my_target: { files: { 'public/vendor.js': require('wiredep')().js } } }, cssmin: { minify: { files: { 'public/vendor.css': require('wiredep')().css } } },
+5
source share

More articles:


All Articles