• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

zckrs/gulp-css-base64: Gulp's task for transform all resources found in a CS ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

zckrs/gulp-css-base64

开源软件地址(OpenSource Url):

https://github.com/zckrs/gulp-css-base64

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-css-base64

Build Status Coverage Status Dependencies NPM Version Download Month

This gulp task converts all data found within a stylesheet (those within a url( ... ) declaration) into base64-encoded data URI strings. This includes images and fonts.

Inspired by grunt-image-embed and written following gulp's guidelines.

Features

  • Supports local and remote resources.
  • Supports buffer (and stream WIP).
  • [>] Ability to define a relative base directory to gulpfile.js. Default is the current directory.
  • [>] Ability to specify a weight limit. Default is 32kB which is IE8's limit.
  • [>] Ability to filter on file extensions. Default there is no filter.
  • [>] Ignore a resource by specifying a directive comment in CSS.
  • Existing data URIs will be ignored.
  • Existing SVG masks will be ignored.

Install

Install this plugin with the command:

npm install --save-dev gulp-css-base64

Usage

var cssBase64 = require('gulp-css-base64');

//Without options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64())
        .pipe(gulp.dest('dist'));
});

//With options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64({
            baseDir: "../../images",
            maxWeightResource: 100,
            extensionsAllowed: ['.gif', '.jpg']
        }))
        .pipe(gulp.dest('dist'));
});

Options

options.baseDir

Type: String

Default value: ``

Note: If you have absolute image paths in your stylesheet, the path specified in this option will be used as the base directory. By default plugin used the current directory of gulpfile.js to find local resources.

options.maxWeightResource

Type: Number

Default value: 32768

options.extensionsAllowed

Type: Array

Default value: []

Ignore a specific resource

You can ignore a resource with a comment /*base64:skip*/ in CSS file after url definition.

.ignored{
  background: url(image.png); /*base64:skip*/
}
.encoded{
  background: url(image.jpg);
}

License

Copyright (c) 2014 Mehdy Dara under the MIT License.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
documentationjs/gulp-documentation: Use gulp with documentation to generate grea ...发布时间:2022-06-21
下一篇:
hexschool/web-layout-training-gulp发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap