Sharp is a Node.js image processing library to which we can easily use in a Gulp task.
Instead of using the tag in HTML, we can wrap it with the element to serve responsive images. wide range of operations available (resize, rotate, masks, filters, etc.) as fast as possible Sharp. Test it! The transform-image task will run every time you push your code. Once installed, add this configuration to your package.json: // package.json To do this, you can use the Husky package. package.jsonĪnother option is to run the tasks every time before we git push or git commit our changes. One option is to create a prestart NPM script to run the transform-image every time before starting the local server. However, I prefer to do it locally, because I need to visualize the images during development or writing time (also to save some build minutes on GitHub ?). You can set up a new GitHub Actions to do so (read my 2nd post on Setting up GitHub Actions and Firebase Hosting). I don't want to run the command manually every time Great! We saved our time and the Earth (less processing power ?) successfully. It should convert just the newly added images. We need to pass in an additional parameter to the changed function to make it work.Ĭheck the gulp-changed documentation if you want to compare the files with other methods. However, convertWebp function changes the file extension from JPG to WebP.
Great, here is the code to resize our images: // tasks/Ĭonst ) )įor the resizeImage function, both input and output filenames are the same, so we just need to call the changed function to compare. I followed Angular naming conventions - and dashed-case personally. I prefer to organize build tasks in tasks directory. You can give the file any name and place it anywhere in your project. Next, create a Gulp file and start coding.
Npm install gulp gulp -cli jimp through2 -D Let's roll up our sleeves and start by installing the packages! # run command Take note that you can use Jimp independently to resize the images, but I find it easier to automate that with Gulp. We will be using Gulp as our build tool and the Jimp for our image processing library. Exclude files with prefix favicon- or suffix -256.For example, we might want to generate images with 300px in the future. Output the resized files to assets/img-500 folder.Only resize images with jpg or png format.Here is an overview of how images are organized in the project: # image folder