Find file
Fetching contributors…
Cannot retrieve contributors at this time
124 lines (102 sloc) 4.07 KB


Build Status via Travis CI Coverage Status

a plugin for gulp to custom you image url inline css file, and support output image file, then you can upload image file to Cloud CDN.


var customCssUrls = require('gulp-custom-css-urls');
var gulp = require('gulp');
var path = require('path');
  return gulp.src('assets/**/*.css')
       * static filepath relative absolute filepath's physical position. 
       * eg: 
       * image path inline css is '/images/demo.png', 
       * image absoulte filepath is '/Users/Navy/Desktop/code/demo/assets/images/demo.png', 
       * the process(process.cwd()) path is '/Users/Navy/Desktop/code/demo', 
       * so the image path relative website root path is 'assets/'
      staticfile_relative_website_rootpath: 'assets/', 
      outputImage: true, // output images file , default to false
      outputImage_path: './.gulp_dist_output_images', // default to './.gulp_dist_output_images'
      modify: function (imageRelativePath, cssFilePath, imageRelativeWebsiteRootPath, imgInfo) {
        // modify image url before prepend or append
        // the imgInfo param is object, {hash: 3503865059, width: 1782, height: 530, orgin_filename: 'custom.png'}
        return path.join(imageRelativeWebsiteRootPath, path.basename(imageRelativePath)); //let the relative path become an absolute path
      prepend: '', // prepend string before image url
      append: '', // append string after image url
      processPath: process.cwd() // custom process path , default to process.cwd()
gulp.task('jadeDemo',function() {
  return gulp.src('views/test.jade')
      staticfile_relative_website_rootpath: staticfile_relative_website_rootpath,
      modify: function (imageRelativePath, cssFilePath, imageRelativeWebsiteRootPath, imgInfo) {
        imageRelativeWebsiteRootPath.should.equal('/images');{hash: 1373564769, width: 1968, height: 920, orgin_filename: 'example.png' });
        return path.join(imageRelativeWebsiteRootPath, imageRelativePath);
      outputImage: true,
      ext: 'jade',
      outputImage_path: './.test_dist_img'

//rollback template content
gulp.task('returnToOrigin', function() {
  return gulp.src('views/forcemodify.html')
      forceModify: function (imageUrl, filePath) {
        var qiniu_host = '';
        var ext = path.extname(imagesUrl);
        if (!ext) {
        return imagesUrl;
        return imagesUrl.replace(ext, '').replace(qiniu_host, '').replace(/_\d{1,}_\d{1,}\.\d{1,}$/, '') + ext;
      ext: 'html'

//css file content, input:

div{background-image: url('/images/example.png');}

// output filename formats: (filename + '' + imgWidth + '' + imgHeight + '.' + crc32 + ext)

div{background-image: url('/images/example_width_height.hash.png');}


  • npm test
  • npm run cov

change log

  • 0.3.0

    feature support:
      image src support leftspace and rightspace.
  • 0.2.2

    bug fix:
      when template contain script, and have code xxx.src=xxx, will cause bug.
  • 0.2.0

    add option forceModify:
      which is a function , change url and direct return result.
  • 0.1.0

    add option ext:
      which support css, html ,jade, default css.
    add option skip:
      which is a array, url will skip when contain character in skip array.
  • 0.0.1

    only support css file.