gulp-responsive
gulp-responsive copied to clipboard
Ignore file by mask in settings
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.
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();
}));
- 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.
- 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.
- The Simplest workaround: rename main.jpg to main.jpeg
.pipe(responsive({
'**/*.{jpg,JPG}': {width: 1000 },
'main.jpeg': {width: 600},
})