Using GULP with Sketch files - CSS Tutorial

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll take a look at generating artwork from Bohemian Sketch files using Gulp. We'll be using Gulp Sketch, a Sketch tool plugin for Gulp that allows us to target a Sketch file and generate ready-to-use assets, even if you don't have a license for the Sketch application. Now, there are quite a few Sketch tool plugins available for Gulp. For this episode, I'll be using one called gulp-dash, which you can find at github.com/cognitum/gulp-sketch. So, if you'd like to follow along with me, download the exercise files, get your Gulp environment ready and let's begin to explore this workflow. Now, this is a workflow that crosses between design and development, so chances are, you'll only be using half of this workflow, but I think it's good to see how this works on both sides. The exercise files include some Gulp project files, including a package.json file, a node_modules folder, and a gulpfile.js. I also have a design folder, which includes the sketch design file, and a publish folder, which contains some empty images directory, and this is where we'll save our images from the Gulp script. So, to begin, let's open this site_design.sketch file in Sketch. Now, in this sketch file, I just want to show the areas where we've defined slices. These are the slices that we're going to be able to hook onto from Gulp. So, in the left-hand panel here, I'm gonna open up the artboard for 1200 pixels. Then I'll open up the header group. Here we can see the featured image slice. If I select this, we can see this highlighted here. In the bottom of the panel here, I'm gonna turn on the slice view. This will filter out all of the individual slices, and here I can see we have four slices. And with this filter turned on, I'll come up here and open up the artboards and the folders. And now we can see the four slices that are defined, and I also want you to notice the names of the slices. These names will be picked up automatically from the Gulp script as well. So, now that we've taken a look at our Sketch document, which has four artboards and four slices defined, let's go back to the exercise files and let's open package.json in a text editor. Now, this json file is part of the Gulp project, this is the inventory file, which tells Gulp about this particular project. If we come over here and look at some of the code inside of here, we can see a devDependencies area here, which specifies three modules. The DEL module for deleted folders and files, we have our Gulp module and the gulp-sketch. If we come over to the node_modules folder in the exercise files, we'll see each one of these folders showing up under here as well. And we also have a gulpfile.js, which is part of our Gulp project, and this is the file that we're going to be adding our script to. So, let's go ahead and open up this file in our text editor as well. Now, inside of this JavaScript file, at the top, we have three variables. We're defining each one of the modules that we're gonna be using in this script, then, down on line five, we're defining a project object. This is just so that we can define the development path and the publishing path, so I put in the folder names here, so the dev_path is the design folder, and I called this development because we're actually using the Sketch file in our development workflow. And then the public_path is the publish folder. This is where our final assets are gonna be saved. And now the first thing we'll do to create our gulp script is to create a task. So down here, after our project variable, we'll type gulp.task(): then inside of the parenthesis, we're gonna name the task. And we need to name this inside of a string. So put in two tick marks. Then inside of the tick marks, we'll type sketch dash slices. Then outside of the string but still inside of the parenthesis, we'll declare an anonymous function. So we'll type comma, function, another set of parenthesis, beginning and ending curly brackets, then I'll come in and just split this open on our curly brackets. Now inside of the curly brackets, we're going to first delete all of the images and the images directory in the publish folder. So we'll typ del, this makes use of the del module we have installed. Then beginning and ending parenthesis, then a semi colon. Inside of the parenthesis, we'll add a string. Type in the word publish to match the folder name. The a forward slash. Then the word images. Then a forward slash. And then we'll put in two asterisks. So this will delete the images directory and anything that might be inside of the images directory. And so now, after we delete the images directory, let's hit a few returns, making sure we're still inside of the curly brackets for the gulp task. Now we'll typ gulp again. Dot src for source. Put in our parenthesis. Inside of the parenthesis, two single tick marks. We're gonna point to the source sketch file. And then inside the string, we'll type design. Capital D-e-s-i-g-n Forward slash, then site underscore design dot sketch. Pointing to the name of the sketch file in the design folder. Now after the parenthesis, we wanna add another instruction. And we can do that by using a feature in gulp called a pipe. So outside of the parenthesis, we'll type dot pipe. Put in another set of parenthesis. And inside of the pipe, we're gonna call the sketch function. So we'll type in sketch, beginning and ending parenthesis. And then inside of these parenthesis, we're gonna include an object which will hold an array. So let's get our cursor inside of the parenthesis for sketch, put in a beginning and ending curly bracket. Inside of the curly brackets, I'll come in here and add two spaces. We're gonna type in the word export, space, colon, space, and then in a string, the word slices. So this is gonna hook in to the slices feature of the slice file. Now once we start putting multiple instructions together, this can get a little bit difficult to read. So what we're gonna do is come back here to gulp before the period, I'm gonna hit a return and tab this in, and then I'm gonna get the cursor before dot pipe and hit another return and space this in. And we can even put extra line returns between these, as well. It's important that the period is the next character besides spaces and returns after the ending parenthesis for the instruction before it. Now I also wanna do this for the array items inside of the sketch instruction. So let's come down here and get our cursor before the word export, after the beginning curly bracket. We'll just hit a return. I'll tab that in and then get that cursor before the ending curly bracket and just tab that in, as well. So now, as we add addition properties inside of the sketch function, we'll be able to see these on separate lines. Now we'll get my cursor after the ending parenthesis for the first pipe. Let's hit a few returns. I'll tab in. Let's add a second pipe. So dot pipe, beginning and ending parenthesis. Inside of here, we're going to set the destination folder for the slices. So inside of the parenthesis, I'll split these open. Let's come in here and let's type gulp, dot dest for destination, beginning and ending parenthesis, inside of the parenthesis two tick marks for a string. Type in public with a capital 'P'. Forward slash, images, forward slash. So now this second pipe is the last instruction in this particular gulp statement here. So we'll come down here and add a semi-colon. Let's hit a few returns. We're still inside of the main gulp task. Let's type in the word complete. Beginning and ending parenthesis, and a semi-colon. So this becomes a function. Next I'll come in here, select complete. Let's copy that. And let's put that in the parenthesis for the anonymous function. So once this task is complete, it's going to run the complete function down here. Which is going to tell our gulp script that it's finished. So now with our script in place, let's save our gulp file dot js. Next, open up your command line tool that you use to run your gulp scripts. My particular text editor has a built in terminal shell, so I'll use that. And now at our command line, we need to change directories into the exercise files on the desktop. So I'll do that here by typing CD, then a space. Then I'll come over here and grab the exercise file folder. Just drop this in, press return. Now to make sure that I'm in that directory, I'll type LS. Press return, this will give me a listing. Now I can see the design folder here. Publish folder, gulp files, node modules, and package.json So now I know I'm inside of the exercise files. So inside of here I'll type clear, press return to clear the screen. And now we can run our gulp task. So at the prompt, I'll type gulp, then a space, then I'll type in the name of our task. Sketch dash slices. And then I'll press return. And now if we take a look inside of the images directory, in the publish folder, will now say that we have our four individual slices. We have our everyday things logo, in the SVG format. We have the featured image dot jpeg, the icon underscore marker dot svg and our seating dot jpeg file. And these match, not only the names, but the file formats specified in the sketch file. Now if you don't have a license for sketch but you wanna change some of the properties, we can do some of this in our script, as well. So let's go back up to our script. Gonna scroll down here. And after export slice, this is an array so I'll come in here and add a comma. Then press a return. We can make use of other export features from sketch including things like save for web. So let's type in save, capital f, o, r, capital w, e, b. Save for web. Space, colon, space. Let's put in two ticks for a string. Type in the word yes. This is how the sketch application will strip all of the excess data from our web graphics, just to make them a little bit smaller. And let's define one more property. Let's come in here and add a comma. And let's add some scales. So type scales, then a space, colon, space. Two tick marks for a string. The first scale, or the size of the slice export. We're gonna set this to one dot o. Which is a one to one relationship. Then A comma, then we'll type two point o. So we'll get double size, or retna enabled graphics. With this change in place, let's hit save on the JS file. Let's come back down to our terminal. I'll hit the up arrow, which will remember the last command I typed. Press return. Our script will delete the images folder and all of the images inside. And then regenerate the artwork based on the slices with our new parameters. So we'll see now that we have everyday things dot ping, and a two x version. Same thing for featured image, icon marker, and seating. And you'll also notice that we no longer have any SVG files. If we come in here in our gulp script and change the properties, we are overwriting what's been set in the sketch file. And then one last thing that we'll take a look at is let's come up here to our JavaScript file and lets change export from slices to artboards. Then I'll come down here and remove the scales. And the comma after safer web. Save our JavaScript file. Let's go back to our terminal. I'll type in clear. Then let's run gulp sketch slices again. Press return. And now in the images directory, you'll see that we have all of the artboards instead of the slices. Now there are many more settings that you can specify in the gulp sketch plugin, as well as options that you can set in your Sketch file when using the Sketch application. So as you can see, this plugin and many other Sketch tool plugins for Gulp provide a very efficient workflow for designers and developers, allowing each one to focus on the specific aspects of their job. Now if you'd like to learn more about using Sketch to create ready to use web assets, check out Learn Sketch: The Basics. And if you'd like to learn more about Gulp, check out Grunt and Gulp. Both courses are available here in the library. And so with that, I'll conclude this episode. And as always, thanks for watching.