Building resized images/thumbnails with Broccoli.js

FelixAkk · February 13, 2016, 3:50pm

A grid of high-res images puts a high toll on load times and bandwidth. I’m trying to figure out if it’s possible to set up Broccoli.js to generate thumbnails, but I’m having a hard time finding out how one implements this. Are there any recommended guides or examples of similar Broccoli.js jobs?

In my case I have several directories with high-res source images, from which downsized and cropped thumbnails must be generated, preferably in separate directories.

broerse · February 13, 2016, 4:54pm

I think the best way is to create an addon and use the postBuild hook to generate thumbnails. I use it here:

github.com

martinic/ember-cli-deploy-build-plus/blob/master/index.js#L26


      
              files.forEach(function(path) {
                fs.unlink(path, function(){});
              });
            }
          }
          
          
module.exports = {
            name: 'ember-cli-deploy-build-plus',
          
          
  // Cleanup env specific robots.txt
            postBuild: function(result) {
              cleanupRobotsTxt(result.directory);
            },
          
          
  // Pick env specific robots.txt
            treeForPublic: function() {
              var appEnv = this.app.env;
              if (process.env.DEPLOY_TARGET) {
                appEnv = process.env.DEPLOY_TARGET;
              }
              var publicFiles = new Funnel(this.app.trees.public);

FelixAkk · February 14, 2016, 2:00pm

I guess this could deserve it’s own ember-cli-deploy plugin. But wouldn’t it be more semantically correct to include this task in the Broccoli.js build pipeline instead of the deployment pipeline?

broerse · February 14, 2016, 4:22pm

It also works if you just run ember build so it does not have to be ember-cli-deploy plugin. This was just meant as a pointer. But it deserves it’s own ember-cli-deploy plugin

FelixAkk · February 21, 2016, 4:02pm

I found ember-cli-imagemin which is related, and is at least very handy in (re)compressing source images. Think it would be nice to make a similar Brocolli plugin for resizing.

Topic		Replies	Views
Help with compilation process Ember CLI	1	1058	January 21, 2015
Broccoli-uncss and ember-cli	1	1312	September 4, 2017
Broccoli or Webpack Ember CLI	5	5459	September 29, 2016
Broccoli architecture question: Making new files available to node Ember CLI	15	910	July 2, 2018
Ember-cli: Motivation of changing build tool from grunt to broccoli	10	3766	January 10, 2015

Building resized images/thumbnails with Broccoli.js

Related Topics