less-plugin-base64

less-plugin-base64

Gulp task for converting all files found within a stylesheet (those within a url( ... ) declaration) into base64-encoded data URI strings.

插件是复制 less-plugin-inline-urls 修改的, 因为我需要实现 gulp-base64 类似的效果。

Install

Install with npm

npm install less-plugin-base64 --save-dev

Example usage

var gulp = require('gulp');
var lessify = require("node-lessify");
var lessPluginInlineUrls = require('less-plugin-base64');
var guitl = require('gulp-util');
var inlineUrls = new lessPluginInlineUrls({
    baseDir: 'public',
    extensions: ['svg', 'png', 'gif', /\.jpg#datauri$/i],
    maxImageSize: 8*1024, // bytes
    debug: true
});

// example
gulp.task('build', function () {
    return gulp.src('./js/*.js')
        .pipe(tap(function (file) {
            gutil.log('bundling ' + file.path);
            var b = browserify(file.path, {
                debug: true
            });

            b.transform(lessify, {
                compileOptions: {
                    plugins: [inlineUrls]
                }
            });
            file.contents = b.bundle();
        }))
        .pipe(gulp.dest('./public/js'));
});

Options

• baseDir (String) If you have absolute image paths in your stylesheet, the path specified in this option will be used as the base directory (relative to gulpfile).

• deleteAfterEncoding (Boolean) Set this to true to delete images after they've been encoded. You'll want to do this in a staging area, and not in your source directories. Be careful.

• extensions (Array of String or RegExps) Proccess only specified extensions. Strings are matched against file-extension only, while RegExps are tested against the raw URL value.

• exclude (Array of String or RegExps) Skip files with URLs that match these patterns. Unlike with the extensions option Strings are sub-string matched against the whole URL value.

• maxImageSize (Number) Maximum filesize in bytes for changing image to base64.

• debug (Boolean) Enable log to console.