Moving Source Files to Production
You can use Gulp tasks to move files from a source directory to a public (or â€œbuildâ€) directory automatically. Often, files in the source (or â€œdevelopmentâ€) directory are verbose and uncompressed and files in the build directory are compressed and optimized for public service. Piping commands to Gulpâ€™s src and dest functions is out-of-the-box service.
Compiling Sass Files to CSS
You can use Gulp tasks to compile Sass files into optimized CSS. Stylesheets for websites need to be CSS for web browsers to interpret the code and correctly display your websiteâ€™s design. Using a gulp compiler module translates your Sass code into CSS and lets you choose whether or not to minify the output.
node-sass are great modules for compiling Sass files to CSS using Gulp task automation.
Concatenating Files and Scripts
Gulp-concat is a module to checkout for doing file concatenation with Gulp.
You can use Gulp for file minification. Removing all the unnecessary spaces helps reduce the overall footprint of the code within a file, so the file will load faster. Websites with faster loading times rank better in Google Search Results Pages and provide better user-experiences for people visiting your website who enjoy instant exchanging of information. Minification is typically a feature of other plugins – for example,
gulp-sass has an option to compress your output – but there are dedicated minification modules like
Auto Prefixing CSS
You can use Gulp to auto-prefix your CSS for broader browser compatibility. Instead of spending lots of unnecessary time hand-coding browser-prefixes to your CSS stylesheet declarations you can write styles in the most general common basic way and a Gulp task can take care of programmatically adding browser prefixes to support browsers you need to support wherever the prexes are needed – no guessing. This trick isnâ€™t a speed booster, but it will help keep your website from looking broken in way more browsers than if you donâ€™t use it (probably).
Gulp-autoprefixer is a Gulp module that does what it sounds like.
Launching a Development Server with Live Refresh
You can use Gulp to launch a web server from your local development folder, watch files for changes, and live-refresh the web browser to preview the updates. Modules like
browsersync let you do exactly that (and more). Automation tasks like starting a web server, monitoring for file changes so scripts know when to compile, and reloading the browser (i.e. syncing the browser) is a huge time saver. It saves you from moving your hands to use the mouse, clicking, changing windows, turning your head to look at a different monitor, and probably even more little things you might not notice until you add up all the time you saved from not doing them. Time savers are time saviors.
Optimizing Images and SVG Files
You can use Gulp to optimize image and SVG files. Just like file minification, graphic files can be optimized for reduces file size and faster load times, too. Running a simple Gulp module like
gulp-imagemin can significantly reduce the size of the resources you’re web pages are loading and that’s super cool. It’s slightly more involved to setup initially, but running a Gulp task is akin to pressing a button – a magic button.