CODEWITHSUNDEEP
csspostcssgulp-minify-csscssnanopostcss-cli
bobc82
bobc82

Reputation: 537

Minify multiple input file with postcss

I installed cssnano following these step: http://cssnano.co/guides/getting-started/

Into the root of my project i ran:

npm install cssnano --save-dev

After i installed postcss-cli:

npm install postcss-cli --global

Finally i created postcss.config.js file following the guide:

module.exports = {
   plugins: [
    require('cssnano')({
        preset: 'default',
    }),
  ],
};

I was able to minify only a file. In the roow of my project i executed:

postcss src/plugins/bootstrap/css/bootstrap.css > src/compiled.min.css

But i'm not able to include multiple input file (and i don't know if it's possible) as i did in gulp. When i try to run a command of this type:

postcss src/plugins/bootstrap/css/bootstrap.css src/plugins/animatecss/css/animate.css > src/compiled.min.css

There was the following error:

Input Error: Must use --dir or --replace with multiple input files

Upvotes: 2

Views: 3880

Answers (1)

bobc82
bobc82

Reputation: 537

I found the solution at this question. I used gulp-concat-css to concatenate al css files into a bundle, as follows:

  • I created a Gulpfile.js file in my project root and I concatenated file with gulp-concat-css as explained here:

https://www.npmjs.com/package/gulp-concat-css

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
 
gulp.task('default', function () {
  return gulp.src('cssfolder/*.css')
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('out/'));
});

  • In the prompt command, in the root of my project i ran:

    gulp default

And bundle.css (under out/ folder) was created.

  • After i minified the bundle.css file with postcss:

    postcss out/bundle.css > out/bundle.min.css

Upvotes: 1

Related Questions