Gulp and Sketch first use notes

I’m working on a new WordPress theme development project and using Gulp and Sketch for the first time. Here are my first use notes:

Gulp

Toolkit for automating tasks. Tons of packages available for things like minifying JS, compiling Sass, linting, packaging into zip files, pushing content to S3 and external servers, watching and automatically rendering changes in the browser, etc.

Pain to install. Dependencies all the way down.

Everything important goes in gulpfile.js

Here are the tasks I’m using:

gulp styles — Compile, autoprefix and minify Sass files.

gulp scripts — Minify javascript files.

gulp images — Compress and optimize images.

gulp watch — Compile assets when file changes are made, start BrowserSync

gulp — Default task – runs all of the above tasks.

gulp zip — Package theme into zip file for distribution, ignoring node_modules.

Sketch

I love being able to take layers, merge them, and export them as different image formats. This makes exporting background content a breeze.

No longer do I need to toil with eyeballing buttons and trying to figure out their padding, background gradients, and border radius. Code export is a gift from above.

I like their price model. Use the app for life, free updates for a year, resubscribe when you need more updates.