Plugin for gulp-query
Uses cssnano with autoprefixer for optimization
This plugin provides automatic source maps, copy, combine and rename CSS, autoprefixing and minification. Write your CSS rules without vendor prefixes — autoprefixer will do everything itself
npm install gulp-query gulp-query-css
Paste the code into your gulpfile.js and configure it
let build = require('gulp-query')
, css = require('gulp-query-css')
;
build((query) => {
query.plugins([css])
.css(['1.css','2.css'],'css/12.css','onetwo')
.css('css_source/*.css','css/')
.css({
from: 'css_source/*.css',
to: 'css/big.css',
name: 'big'
})
;
});And feel the freedom
gulp
gulp --production // For production
gulp watch // Watching change
gulp css // Only for css
gulp css:onetwo
gulp css:big watch
...
.css({
name: "task_name", // For gulp css:task_name
from: 'css_source/*.css', // ['1.css','2.css']
to: "css/",
source_map: true,
source_map_type: 'inline',
full: false, // if set true is without compress in prod
autoprefixer: {
browsers: ["> 1%", "last 2 versions"],
}
})