gulp-css-assetus

gulp-css-assetus

Parses your CSS to find the assets and then saves (or convert to inline) and compresses

Easy to use

Install

npm install gulp-css-assetus --save

Example

Input SCSS

$vk: "assets/images/vk.png?name=somedir/vkontakte";
$facebook: "assets/images/facebook.png";

.vk {
  background-image: assetus-url($vk);
  background-size: assetus-size($vk);
  height: assetus-height($vk);
  width: assetus-width($vk);
}

.facebook {
  background-image: assetus-inline($facebook);
  height: assetus-height($facebook);
  width: assetus-width($facebook);
}

gulpfile.js

import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import assetus from "gulp-css-assetus";
gulp.task('scss', () => {
  return gulp.src('./assets/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(assetus({
        searchPrefix: 'assetus',
        saveImage: true,
        withImagemin: true,
        withImageminPlugins: null,
        imageDirCSS: '../images/',
        imageDirSave: 'public/images/'
    }))
    .pipe(gulp.dest('./public/css'));
});

Output CSS

.vk {
  background-image: url("../images/vk.png");
  background-size: 52px 52px;
  height: 52px;
  width: 52px;
}

.facebook {
  background-image: url(data:image/png;base64,...);
  height: 52px;
  width: 52px;
}

Methods and options

The path relative to the root of the script

$image: "assets/images/image.png";

Methods

Method	Description
assetus-url($image);	is replaced by a relative link to the image url("../images/icons.png")
assetus-size($image);	is replaced with the size of the image
assetus-height($image);	is replaced by height in pixels
assetus-width($image);	is replaced by width in pixels
assetus:ihw($image);	is replaced by the image's url, height and width of the image background-image: url("../images/image.png);height:30px;width:30px;

Inline options

$image: "assets/images/image.png?name=newimage";

• name — another name of the image to save

Plugin options

// ...
.pipe(assetus({
    searchPrefix: "assetus",
    saveImage: true,
    withImagemin: true,
    withImageminPlugins: [
        imageminPngquant({
           quality: [.6, .7],
           speed: 1
       })
    ],
    imageDirCSS: "../images/",
    imageDirSave: "public/images/"
}))
// ...

saveImage

Save or don't save. Defaults to true

If you use assetus-inline, the image will not be saved

withImagemin

Compression of the image using [imagemin][]. Defaults to true

Images of assetus-inline are compressed too

withImageminPlugins

Specify what to use plugins for. Defaults to [require('imagemin-pngquant')({quality: "60-70",speed: 1})]

imageDirCSS

Relative URL (background-image) which is replaced in position in your CSS. Defaults to ../images/

imageDirSave

The path where to save the images relative to the root of the script. Defaults to public/images/

searchPrefix

If you want to use a different prefix, then this option is for you. Defaults to assetus

gulpfile.js

// ...
.pipe(assetus({
    searchPrefix: "myprefix"
}))
// ...

Now you can now use

SCSS

.icon {
    background-image: myprefix-url($image);
    background-size: myprefix-size($image);
}

Expert mode

gulpfile.js

import gulp from "gulp";
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import assetus from "gulp-css-assetus";
import imagemin from "gulp-imagemin";
import cssnano from "gulp-cssnano";
import imageminPngquant from "imagemin-pngquant";
import imageminMozjpeg from "imagemin-mozjpeg";
import buffer from "vinyl-buffer";
import merge from "merge-buffer";
const sass = gulpSass(dartSass);

gulp.task("scss", () => {
    const assetus = gulp.src("./scss/**/*.scss")
        .pipe(sourcemaps.init())
        .pipe(sass().on("error", sass.logError))
        .pipe(assetus({
            saveImage: false,
            withImagemin: false,
            withImageminPlugins: null,
            imageDirCSS: "../images/",
            imageDirSave: "public/images/"
        }));

    // Stream CSS
    const stream_css = assetus.css
        .pipe(cssnano())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("./public/css"));

    // Stream images
    const stream_img = assetus.img
        .pipe(buffer())
        .pipe(imagemin(
            [
                imageminMozjpeg(),
                imageminPngquant({
                    quality: [.6, .7],
                    speed: 1
                })
            ]
        ))
        .pipe(gulp.dest("./public/images"));
});