M. Inam
Good but not into much depth
Details
In this guide, we'll introduce Gulp.js. We'll start out by installing Gulp and using it to carry out some basic tasks, such as compressing images, and then move on to using it for more advanced tasks, like populating a database.
Description
Developers spend precious little time coding. Even if we ignore irritating meetings, much of the job involves basic tasks that can sap your working day, such as generating HTML from templates and content files, compressing new and modified images, transpiling ES6 to cross-browser-compatible ES5, and so on. These tasks must be repeated every time you make a change. You may start with good intentions, but the most infallible developer will forget to compress an image or two. To spend your time on more productive taks, you need a task runner or build process.
In this guide, we'll introduce Gulp.js. Gulp may not be the newest tool on the block, it remains one of the fastest and most flexible Node.js task runners. We'll start out by installing Gulp and using it to carry out some basic tasks, such as compressing images, and then move on to using it for more advanced taks, like populating a database.
Creator
Craig Buckler
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Content
2
Reviews
Katie Hartrick
My goal at the end of this tutorial was a Gulp 4 development environment. Instead, I was unable to complete the tutorial as the code has 'a couple of typos in there'. A SitePoint Editor also suggested that I look at a Webpack tutorial instead. I have used Gulp 3 and wanted a good reference point to upgrade some existing projects. I assumed this tutorial would step through a watch command where I would edit HTML, JS and SCSS and see changes using browser-sync. It doesn't. I was hoping at the end of the tutorial there would be a reference gulpfile.js that I could cross-check to make sure I hadn't made any mistakes. This is not provided. Neither is a diagram showing project structure, nor a gitignore file (both very helpful for beginners). If you're new to Gulp, or are more interested in front-end development than spending hours troubleshooting a tutorial, then I do not recommend this tutorial in its current form.
