andismith / grunt-responsive-images

Produce images at different sizes for responsive websites.
http://www.andismith.com/grunt-responsive-images/
MIT License
719 stars 96 forks source link

Is there a way to apply tasks based on filenames? #53

Closed stekhn closed 10 years ago

stekhn commented 10 years ago

Is it possible to assign tasks by filename?

My options look like this:

options: {
    sizes: [{
            name: 'article',
            width: 640,
        },
        {
            name: 'header',
            width: 1200
        },
        {
            name: 'preview',
            width: 200
        }]
    }

Now I want to apply the three tasks based on the filenames article_foo.jpg, header_bar.jpg, preview_awesome.jpg etc.

andismith commented 10 years ago

Sure, you can use globbing patterns in your files to target files. e.g. set the src to "/images/*_/_foo.jpg"

Simply create a task for each file target.

See http://gruntjs.com/configuring-tasks#globbing-patterns for more.

stekhn commented 10 years ago

Thank you, that did the trick and it's way easier than I expected. Here is my solution if someone is looking for an example:

grunt.initConfig({

    responsive_images: {

        resizeArticles: {
            options: {
                sizes: [{
                    name: 'mobile',
                    width: 480
                },
                {
                    name: 'tablet',
                    width: 640,
                },
                {
                    name: "www",
                    width: 960,
                },]
            },

            files: [{
                expand: true,
                src: ['article_*.{jpg,gif,png}'],
                cwd: 'example/assets',
                custom_dest: 'example/img/{%= name %}'
            }]
        },

        resizePreviews: {
            options: {
                sizes: [{
                    name: 'mobile',
                    width: 100
                },
                {
                    name: 'tablet',
                    width: 150
                },
                {
                    name: "www",
                    width: 200
                },]
            },

            files: [{
                expand: true,
                src: ['preview_*.{jpg,gif,png}'],
                cwd: 'example/assets',
                custom_dest: 'example/img/{%= name %}'
            }]
        },

        resizeHeaders: {
            options: {
                sizes: [{
                    name: 'mobile',
                    width: 600
                },
                {
                    name: 'tablet',
                    width: 900
                },
                {
                    name: "www",
                    width: 1200
                },]
            },

            files: [{
                expand: true,
                src: ['header_*.{jpg,gif,png}'],
                cwd: 'example/assets',
                custom_dest: 'example/img/{%= name %}'
            }]
        }
    },
});

grunt.loadNpmTasks('grunt-responsive-images');
grunt.registerTask('default', ['responsive_images:resizeArticles', 'responsive_images:resizeSlots', 'responsive_images:resizeHeaders']);
andismith commented 10 years ago

Glad that helped! :) :+1: