Menu icon Foundation
Foundation 6: Minify CSS

How can I minify the CSS?

foundation6

How can I minify the CSS?

Geoff Kimball over 3 years ago

How did you install the project? With a plain CSS download or with one of our Sass templates?

Klevis Miho over 3 years ago

With the Foundation CLI and the blank theme.

Geoff Kimball over 3 years ago

If it's the Basic Template, open gulpfile.js and edit the sass task to have Sass compress the output.

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      // Right here!
      outputStyle: 'compressed'
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

If it's the ZURB Template, production builds are built-in. Run npm run build and Gulp will do a one-time build that compresses your CSS, JavaScript, and images.

Klevis Miho over 3 years ago

Thanks Geoff Kimball. Your solution worked :-)

Klevis Miho over 3 years ago

Now I am testing the Zurb Template. How can I minify the css on this?

Geoff Kimball over 3 years ago

Run npm run build. That will do a one-time build with a special --production flag turned on, which enables CSS compression, JavaScript compression, and image compression.