gulp-responsive icon indicating copy to clipboard operation
gulp-responsive copied to clipboard

Ignore file by mask in settings

Open Alexufo opened this issue 5 years ago • 2 comments

I have a folder with images with different names except main.jpg

I want convert main.jpg to 600px and over files to 1000px

 .pipe(responsive({
     '**/*.{jpg,JPG}': {width: 1000 },
     'main.{jpg,JPG}': {width: 600},
 })

But i want ignore main.jpg for 1000px width resizing. And do this

'**/!(main.*)*.{jpg,JPG}': {width: 1000 },

But this rule is not working.

Alexufo avatar Apr 01 '19 15:04 Alexufo

I had same problem, You can use two tasks and define these rules in gulp.src():

function devImagesResizeMain(){
    return gulp.src( 
        [
            IMG_SRC_DIR + '/**/*.{jpg,jpeg,png,gif,svg}',
            '!' + IMG_SRC_DIR + '/**/header.{jpg,jpeg,png,gif,svg}' 
        ], { allowEmpty: true })
    .pipe(responsive(
        {
            '*.jpg': getImagesResizeRules()
        }
    ))
    .pipe(gulp.dest(DEST_DEV_DIR + DEST_IMG_DIR));
}

function devImagesResizeCust(){
    return gulp.src( IMG_SRC_DIR + '/**/header.{jpg,jpeg,png,gif,svg}', { allowEmpty: true })
    .pipe(responsive(
        {
            'header.jpg':   injectObjectsInArrayByObj( getImagesResizeRules(), {gamma: 3.0} )
        }
    ))
    .pipe(gulp.dest(DEST_DEV_DIR + DEST_IMG_DIR));
}

gulp.task('resize',gulp.series(devImagesResizeMain, devImagesResizeCust, function (done) {
    done();
}));

mwkaicz avatar Jul 11 '19 12:07 mwkaicz

  1. This solution works, but it leads to more issues:
return gulp.src( 
    IMG_SRC_DIR + '/**/*.{jpg,jpeg,png,gif,svg}'
)
.pipe(responsive({
     '!main.*': {width: 1000 },
     'main.{jpg,JPG}': {width: 600},
 })

This only works for one image format type (.jpg in this case), as it will grab ALL images excluding 'main.' and format the width to 1000px.

  1. Another solution would be to prefix all images depending on their purpose and do something like this:
.pipe(responsive({
     'other-*.{jpg,JPG}': {width: 1000 },
     'main-*.{jpg,JPG}': {width: 600},
 })

Prefixing could be made less tedious for a large amount of files with gulp-rename.

  1. The Simplest workaround: rename main.jpg to main.jpeg
.pipe(responsive({
     '**/*.{jpg,JPG}': {width: 1000 },
     'main.jpeg': {width: 600},
 })

Northward-Design avatar Feb 11 '20 19:02 Northward-Design