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

1$vk: "assets/images/vk.png?name=somedir/vkontakte";
2$facebook: "assets/images/facebook.png";
3
4.vk {
5  background-image: assetus-url($vk);
6  background-size: assetus-size($vk);
7  height: assetus-height($vk);
8  width: assetus-width($vk);
9}
10
11.facebook {
12  background-image: assetus-inline($facebook);
13  height: assetus-height($facebook);
14  width: assetus-width($facebook);
15}

gulpfile.js

1import dartSass from 'sass';
2import gulpSass from 'gulp-sass';
3const sass = gulpSass(dartSass);
4import assetus from "gulp-css-assetus";
5gulp.task('scss', () => {
6  return gulp.src('./assets/scss/**/*.scss')
7    .pipe(sass().on('error', sass.logError))
8    .pipe(assetus({
9        searchPrefix: 'assetus',
10        saveImage: true,
11        withImagemin: true,
12        withImageminPlugins: null,
13        imageDirCSS: '../images/',
14        imageDirSave: 'public/images/'
15    }))
16    .pipe(gulp.dest('./public/css'));
17});

Output CSS

1.vk {
2  background-image: url("../images/vk.png");
3  background-size: 52px 52px;
4  height: 52px;
5  width: 52px;
6}
7
8.facebook {
9  background-image: url(data:image/png;base64,...);
10  height: 52px;
11  width: 52px;
12}

Methods and options

The path relative to the root of the script

1$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

1// ...
2.pipe(assetus({
3    searchPrefix: "assetus",
4    saveImage: true,
5    withImagemin: true,
6    withImageminPlugins: [
7        imageminPngquant({
8           quality: [.6, .7],
9           speed: 1
10       })
11    ],
12    imageDirCSS: "../images/",
13    imageDirSave: "public/images/"
14}))
15// ...

---

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

1// ...
2.pipe(assetus({
3    searchPrefix: "myprefix"
4}))
5// ...

Now you can now use

SCSS

1.icon {
2    background-image: myprefix-url($image);
3    background-size: myprefix-size($image);
4}

Expert mode

gulpfile.js

1import gulp from "gulp";
2import dartSass from 'sass';
3import gulpSass from 'gulp-sass';
4import assetus from "gulp-css-assetus";
5import imagemin from "gulp-imagemin";
6import cssnano from "gulp-cssnano";
7import imageminPngquant from "imagemin-pngquant";
8import imageminMozjpeg from "imagemin-mozjpeg";
9import buffer from "vinyl-buffer";
10import merge from "merge-buffer";
11const sass = gulpSass(dartSass);
12
13gulp.task("scss", () => {
14    const assetus = gulp.src("./scss/**/*.scss")
15        .pipe(sourcemaps.init())
16        .pipe(sass().on("error", sass.logError))
17        .pipe(assetus({
18            saveImage: false,
19            withImagemin: false,
20            withImageminPlugins: null,
21            imageDirCSS: "../images/",
22            imageDirSave: "public/images/"
23        }));
24
25    // Stream CSS
26    const stream_css = assetus.css
27        .pipe(cssnano())
28        .pipe(sourcemaps.write())
29        .pipe(gulp.dest("./public/css"));
30
31    // Stream images
32    const stream_img = assetus.img
33        .pipe(buffer())
34        .pipe(imagemin(
35            [
36                imageminMozjpeg(),
37                imageminPngquant({
38                    quality: [.6, .7],
39                    speed: 1
40                })
41            ]
42        ))
43        .pipe(gulp.dest("./public/images"));
44});