node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



SCSS + sprites and assets

Uses gulp-css-spritus and gulp-css-assetus for images

Uses cssnano with autoprefixer for optimization

  • This plugin provides automatic source maps, compiling Sass into CSS, autoprefixing and minification.
  • Write your CSS rules without vendor prefixes — autoprefixer will do everything itself.
  • Make sprites easily
  • Compress images directly in the .scss
npm install gulp-query gulp-query-scss-images


Paste the code into your gulpfile.js and configure it

let build = require('gulp-query')
  , scss = require('gulp-query-scss-images')
cocktail(function (query) {
    query.plugins([scss, webpack])
        includePaths: [
        from: 'src/scss/main.scss',
        to: 'css/',
        name: 'main'

And feel the freedom

gulp --production // For production
gulp watch // Watching change
gulp scss // Only for scss
gulp scss:app // Only for app.scss
gulp scss:admin scss:main watch // Watching change only for admin.scss and main.scss


    name: "new_name", // For gulp scss:new_name 
    from: "scss/app.scss",
    to: "css/",
    source_map: true,
    source_map_type: 'inline',
    full: false, // if set true is without compress in prod
    image_dir_css: '../images/', // for css (image-url) 
    image_dir_save: 'images/', // for save image assets. Relative path from gulpfile.js 
    includePaths: [
        //'../node_modules/compass-mixins/lib/', // relative path from gulpfile.js 
    autoprefixer: {
      browsers: ["> 1%", "last 2 versions"],
    png: {
      quality: '60-70',
      speed: 1
    jpeg: {
      quality: 60,