Menu icon Foundation
From Prototype to Production Ready Code

I have installed Foundation 6 via Yeti on my Mac, and have also set it up using the command line, so am familiar with both ways of installing Zurbs custom stack. Really liking this stack with browser sync etc. So this is a great setup for building quickly and having access to all Foundation resources for prototyping. But once I finish figuring things out and want to use say only the grid plus 3 or 4 components, how do I zap out all unused resources, and Minify all the files etc. so the site is as small as possible, for production/launch.

Thanks for your assistance.

outputoptimizationproduction codeproductionprototypeminify

I have installed Foundation 6 via Yeti on my Mac, and have also set it up using the command line, so am familiar with both ways of installing Zurbs custom stack. Really liking this stack with browser sync etc. So this is a great setup for building quickly and having access to all Foundation resources for prototyping. But once I finish figuring things out and want to use say only the grid plus 3 or 4 components, how do I zap out all unused resources, and Minify all the files etc. so the site is as small as possible, for production/launch.

Thanks for your assistance.

Nick TC over 3 years ago

Just run 'npm run build' instead of 'npm start'. It will let gulp run additional tasks like minifying, etc. Removeing components that you don't like to use can be simply done by commenting out the specific includes in the top of your app.scss file before you execute 'npm start'.

Dan over 3 years ago

Thanks Nick, I'll try it out.

Btw: Can you recommend a link where I could learn more about this, maybe adjust settings etc. prior to running the build - if available?

Nick TC over 3 years ago

Hi Dan,

You could look at http://gulpjs.com/. This is the (task)engine used for 'building' your website/assets. Some tasks will only be executed in case of a production build (npm run build). For example:

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('./dist/assets/js'));
});

You can see here that in case of production it will uglify, and it will not write sourcemaps.

Dan over 3 years ago

Thanks for that Nick,

I tried it out and it just now and works great. I guess the one part I would like to tweak is the Jquery script being injected and added to the app.js

Wonder if there's a relatively simple way to excuse a file such as Jquery.

Anyway, I can always weed it out manually if not.

Thanks for your help!