cirmaciu / grunt-scss-image-helpers

Image dimension hepers for SCSS

grunt-scss-image-helpers

Grunt tasks to replace Compass image helpers. It is recommended to run this task with watch task on image folder only.

Helpers

All helpers have one argument: image name. Name is created relatively to the imageRoot option. If we want to use an image in subfolder, we need to enter a path incl. folder name.

Example: image-url('foo.png'), image-url('subfolder/foo.png')

image-width()

Returns width of specified image in pixels (for example 30px).

image-height()

Returns height of specified image in pixels (for example 30px).

image-url()

Returns path to specified image including url().

Example: background-image: image-url('foo.bar') is compiled to background-image: url('foo.bar').

When relativePath is set to ../img/, helper will return url('../img/foo.bar').

When antiCache is set to true, helper will return path with timestamp: url('foo.12345678.bar) or url('../img/foo.12345678.bar').

inline-image()

Returns image as data url.

Example: inline-image('foo.png') becomes url('data:image/png;base64,...').

Options

imageRoot

Type: String
Default: ''

Path to image folder. All image names are created relatively to this folder.

prefix

Type: String
Default: grunt-images

Prefix for SCSS variables. These variables are created: $grunt-images-names, $grunt-images-widths, $grunt-images-heights, $grunt-images-base64 and $grunt-images-relative-path.

antiCache

Type: Boolean
Default: false

If set to true, task generates file names with timestamps to invalidate browser cache.

relativePath

Type: String
Default: ''

All image paths in css are prefixed with this path. For example path ../img/ and image foo.png become ../img/foo.png.

size

Type: Integer
Default: 10240

Maximum file size for base64 encoding. Images bigger than that won't be encoded.

Example config

grunt.initConfig({
    scss_images: {
        dist: {
            options: {
                imageRoot: 'assets/img/',
                prefix: 'grunt-images',
                antiCache: true,
                relativePath: '../img/',
                size: 4096
            },
            files: {
                'assets/scss/_images.scss': ['assets/img/*.png']
            }
        }
    }
});

grunt.loadNpmTasks('grunt-scss-image-helpers');
grunt.registerTask('default', ['scss_images']);

License

MIT License • © Daniel Cirmaciu

grunt-scss-image-helpers's Issues

add tests

It would be awesome to show up what this plugin does.

I mean source.scss, images.scss and expected.css.

image-url set up

Please help me understand. I've used Compass before. In my scss file, I reference images via image-url() based on the image path declared my config.rb file.

In this project I'm hoping to leave Compass behind and just use Sass. Obviously, there is no image-url function with Sass alone. That's where this npm module comes into play.

In my css file, the image path is still being rendered as background: image-url("photo.jpg"); but with the help of this module, it should translate that to background: url("../images/photo.jpg"); but it's not. My setup must be wonky.

My gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {

      build: {
        src: ['javascripts/libs/*.js', 'javascripts/scripts.js'],
        dest: 'javascripts/build/global.min.js'
      }
    },
    sass: {
      dist: {
        options: {
          style: 'expanded',
          sourcemap: 'true'
        },
        files: {
          'stylesheets/styles.pre.css': 'sass/styles.scss'
        }
      }
    },

        autoprefixer: {
      dist: {
        files: {
          'stylesheets/styles.css': 'stylesheets/styles.pre.css'
        }
      }
    },

    scss_images: {
        dist: {
            options: {
                imageRoot: 'images/',
                antiCache: false,
                relativePath: '../images/'
            },

        }
    },

    watch: {
  options: {
    livereload: true,
  },
  scripts: {
    files: ['javascripts/libs/*.js','javascripts/scripts.js'],
    tasks: ['uglify'],
    options: {
      spawn: false,
    }
  },
  css: {
    files: ['sass/*.scss'],
    tasks: ['sass','autoprefixer'],
    options: {
      spawn: false,
    }
  },
  images: {
    files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
    tasks: [],
    options: {
      spawn: false,
    }
  },
  html:{
    files: ['./**/*.html', './**/*.php'],
    tasks: [],
    options: {
      spawn: false,
    }
  }
}


});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-scss-image-helpers');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify','sass','scss_images','autoprefixer']);

};

Support for SVG files?

Hi ...

please add support for SVG files as well 👍

Best
Tino

Unsupported file type

Trying to run the task, I get the message above.
Cannot go back to the cause and I don't know which file it is.

Is it a module bug or required modules bug?