![]() Depending on your requirements and the scale of your project, that resizeImages task could easily be made incremental, which would make it even faster. Just to give you an idea, all images and thumbnails for this website get generated in 38 milliseconds only. If you like numbers, check out the performance benchmarks available on their website. build = build "Fast" is an understatementįor any project I have worked on lately, Sharp has proven to be the fastest and most flexible option available. compose tasks (massively simplified here)Ĭonst watch = gulp. PackagesĬonst img = require ( "./gulp-tasks/images.js" ) Ĭonst server = require ( "./gulp-tasks/browsersync.js" ) Our main gulpfile.js will use that task in watchers and expose it to Gulp CLI, as part of a more complex task or not. loop through configuration array of objects We then need a Gulp task to get the images we need to resize from our src directories, apply the specified image manipulations using sharp and save them in the dist directories specified in our object. Copy one object, modify paths and options and you're good to go. Using such an object makes it easy to add new image directories and transforms should we need them down the line. Let's now create a configuration array of objects that will specify our source and destination folders for each transforms, along with our transform options for sharp. ![]() sharp: sharp image manipulation package.path: node package to work with files and directories.glob: use glob patterns to find files and return them.Let's move to creating our gulp task to resize our images. If you want a better overview of how to use Gulp 4, have a look at this excellent article on upgrading to Gulp 4 by Joe Zimmerman or, alternatively, read my humble take on it. Our main gulpfile.js is only used to compose complex tasks and to expose relevant tasks to the Gulp CLI using exports. That way, we can make tasks self-contained and just import or require them. In this case, here is the structure we are going to use: +- gulpfile.js Whenever I deal with complex tasks, I tend to split them into their own external files. Let's first install sharp as a dependency npm install -save-dev sharp It offers a wide range of options and operations we can use and is a whole lot faster and more flexible than alternatives like gulp-image-resize for example. Sharp is a Node.js image processing library to which we can easily use in a Gulp task. wide range of operations available (resize, rotate, masks, filters, etc.) Find out the best CDN to use with gulp-image-resize-ar or use multiple CDN as fallback.ability to specify transforms characteristics per location.ability to specify different source and output locations.easy integration with Gulp (Node.js based).For many projects I work on, especially JAMstack ones, having a quick way to generate thumbnails based on source images is crucial.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |