Usage

atom

Open the Command Palette and enter cssnano. Alternately, use either the context menus or ctrl + alt + o on your keyboard.

You can customise the output in the settings menu.

broccoli

var cssnano = require('broccoli-cssnano');
tree = cssnano(tree, options);

Alternatively, you can use broccoli-postcss to run cssnano in combination with other PostCSS processors. See the documentation for more information.

brunch

Add cssnano to the plugin section of your brunch config file:

plugins: {
  cssnano: {
    zindex: false
  }
}

Alternatively, you can use postcss-brunch to run cssnano in combination with other PostCSS processors. See the documentation for more information.

cli

cssnano [input] [output] {OPTIONS}

You can also use stdin & stdout redirections:

cssnano < main.css > main.min.css

To see all available options, do:

cssnano --help

You can install cssnano-cli as a development dependency of your project, and get the command by this snippet in your .bashrc:

export PATH=$PATH:./node_modules/.bin

Alternatively, you can use postcss-cli to run cssnano in combination with other PostCSS processors. See the documentation for more information.

fly

export build = function* () {
  yield this
    .source('./main.css')
    .cssnano()
    .target('out/')
}

Alternatively, you can use fly-postcss to run cssnano in combination with other PostCSS processors. See the documentation for more information.

grunt

require('load-grunt-tasks')(grunt);

grunt.initConfig({
  cssnano: {
    options: {
      sourcemap: true
    },
    dist: {
      files: {
        'dist/app.css': 'src/app.css'
      }
    }
  }
});

grunt.registerTask('default', ['cssnano']);

Alternatively, you can use grunt-postcss to run cssnano in combination with other PostCSS processors. See the documentation for more information.

gulp

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');

gulp.task('default', function () {
  return gulp.src('./main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('./out'));
});

Alternatively, you can use gulp-postcss to run cssnano in combination with other PostCSS processors. See the documentation for more information.

javascript

cssnano can be used directly via its JavaScript API.

var cssnano = require('cssnano');
var fs = require('fs');

cssnano.process(css, opts).then(function (result) {
  fs.writeFileSync('app.css', result.css);
});

javascript (postcss)

Alternately, you can use PostCSS directly if you wish to use cssnano in combination with other processors.

var postcss = require('postcss');
var cssnano = require('cssnano');
var fs = require('fs');

postcss([cssnano()])
  .process(css, { from: 'src/app.css', to: 'app.css' })
  .then(function (result) {
    fs.writeFileSync('app.css', result.css);
    fs.writeFileSync('app.css.map', result.map);
  });

webpack

cssnano is bundled with css-loader, so you don't need anything special to get it to work in your webpack environment. See their documentation for more details.