- Overview
- Transcript
5.8 Custom Builds
In this lesson, I'll show you how to create custom build scripts. Need to watch and compile CoffeeScript with a click of a button? What about executing PHP or calling a shell script? That's all detailed in this screencast.
1.Introduction1 lesson, 02:05
1.1Welcome02:05
2.Getting Started9 lessons, 35:20
2.1Installation and Base Settings04:54
2.2Services and Opening Sublime From the Terminal02:20
2.3Multiple Cursors and Incremental Search06:54
2.4The Command Palette04:13
2.5Instant File Changing03:19
2.6Symbols04:17
2.7Key Bindings02:33
2.8Installing Plugins Without Package Control02:54
2.9Package Control03:56
3.Snippets3 lessons, 14:40
3.1Your First Snippet09:04
3.2Adding Snippets Through Package Control02:32
3.3Easier Testing With Snippets03:04
4.Essential Plugins12 lessons, 46:58
4.1Zen Coding07:09
4.2Emmet06:52
4.3Cross-Browser CSS With Prefixr02:17
4.4Fetch Files With Ease 04:22
4.5Lightning Fast Folder and File Creation 02:12
4.6Sidebar Enhancements03:09
4.7Sublime Linter02:01
4.8Sexy Code Snippet Management With Gists07:50
4.9DocBlockr03:49
4.10Pretty Task Management02:42
4.11HTTP Requests Within Sublime02:29
4.12LiveReload02:06
5.Tips, Techniques and Modifications8 lessons, 49:09
5.1Regular Expressions in Sublime05:49
5.2Vintage Mode10:46
5.3Quicker Stylesheet References02:30
5.4Joining Lines04:40
5.5Sublime and Markdown with Marked03:10
5.6All About Projects 05:54
5.7Configuring and Mastering Split Windows07:19
5.8Custom Builds09:01
6.Closing1 lesson, 00:49
6.1Conclusion00:49
5.8 Custom Builds
So, let's say you're working on some of your code and I'll have a function here called sayHi to a person and, you've seen this before, we're going to return "Hi there, $name";. So, now we wanna do a bit of manual testing. So, ideally, when I run sayHi('John'); in response I should see Hi there, John. But it seems like right now the only way would be to either pull up a browser or switch over to the terminal and do it. Let's try the latter. I will echo out that response, bring up the terminal and run php funcs.php and we do get that output. But that can be a little bit tedious. Wouldn't it be great if we could all of this from directly within Sublime Text 2? And we can. The key is to use build scripts. So I'm gonna go up to Tools > Build System, and you'll see that there are a handful here provided for us. But we're going to create a new build system, so I will go to the bottom. So this first option that's provided for us command. That would correspond to in this case PHP. So we're gonna change that to php. And then as the next items in this array, that would be your arguments. So for example if you want to see if there are syntax errors. Then we could run php lint using the -l. And if you want to get a list of those you can run php help, and they'll show you a few of the options here. So in our case to lint it, we pass it through -l. So now if I run php -l funcs.php, now we can see nope, no errors. So if we wanted to replicate that within our build script, we would do php -l, and then we need to give it the file name. Well, Sublime Text offers a bunch of variables that we can use here. If I quickly switch over the Chrome, you can see in the Sublime Text documentation, here are all of the variables that are provided for you. Everything from the project name, to the extension. To the directory of the current file. Now in our case we want to run PHP on the current file itself. So we can use this variable, file, so I will pass that in. So let's leave it like that right now and I'm gonna save it. Within my User directory I'll create a new directory called builds just to store them all here. And I'll call it PHP-Lint. Now if I switch back over to funcs.php and I go back to Tools > Build System, you'll see we have this new option here, PHP-Lint. So now I can run this build and when I do it's going to execute this. There are a couple ways to run the build. We can go to Tools > Build, otherwise we could bring up the command palette. Build, build, or I can hit the shortcut, Cmd+B. Which is what I'll do here. So now this will pop up a screen. Says it finished in 0.2 seconds, and there were no syntax errors. If I hit Escape that will disappear. Now let's introduce an error that we know is here. So in our case, we do have the Lint plugin set up, so we're already seeing that. Extra verification, we've run it again and now we can see the PHP parse error, that we are missing a semicolon. So that's great for running errors, but what if we just wanna see the output, rather than having to go to the terminal to run the file? Well once again, let's go back to PHP-Lint, and I'm just going to remove the option here to run Lint on it. Now, I'm going to Save As and this time we'll just call it PHP. Now, if I hide it, I go back to Tools > Build System. We also have one for PHP. Now, if I run it, you will see, Hi there, John. Great. So, now we have an easy way to grab some feedback when we're writing our functions. Now another way that Sublime's build system can be really helpful is when compiling things. So for instance, let's say we're working on some coffee script. I will say script.coffee. So let's do the same thing as we did earlier. I'll create a function called sayHello. That's going to accept a argument for the name. And that's going to run a function that returns "Hi there, #{name}". So now I need a way to compile this down to regular JavaScript. If I have coffee script installed, and if you don't, you can do it on their website its very easy. I could then run coffee-c. And then the file name is script.coffee. So now if I return, we do have script.js and we have compiled the code. So there are certainly plug-ins to do this, but let me show you the manual way first. I would go to Tools > Build System, ignore CoffeeScript here, we're going to do it ourselves, > New Build System, we're going to save this into our Builds directory as coffeescript. But I'll precede it with my, so that I know to delete it after this video. And we can simply switch to the terminal and grab this. All right, so let's bring that up for our reference. We're going to run coffee, the option will be -c, and the file that we're compiling will be the current file. So let's try that by itself. I'm going to delete script.js. Go back to script.coffee and we'll change the build system to my-coffeescript. Now if I run it with Cmd+B we can see yep, script.js did work. Now what if we want to watch and compile? Well in that case let's just return here and we're also going to add -w. So now we're going to watch and then compile. So let's try this one more time. Delete script.js, go back to script.coffee. I will hit Cmd+B, and now it is compiling. So we will change this to, What's up. Now if we run it, if we did everything right, we can see it did automatically compile again. Now there's a handful of options that we can pass to our build script. So one of them would be the selector, and this would be how Sublime could identify which files should correspond to this build script. Selector, and similar to when you create snippets, we would do source.coffee. And now that would reference coffee script files. And another one you would want to consider is if for some reason it's not recognizing coffee, you may need to give it the full path. Or you could set it right here. You could say the path to where the coffee executable is stored might be something like /user/bin or user/local/bin. You may need to include that. It just depends on your setup. So I will comment that out. Now, what about when you wanna group things together? Well, let me give you an example of a different type we could do. I'm gonna create within Build Systems, a new build system. And this time we're going to run a shell script that we create. So maybe we will store it within a bin folder. And we will call it init.sh. So, let's save that. Once again in our build system and we'll call it Git-Init. This is just an example. This probably isn't the best idea to have all of these different builds. But hopefully, this will give you the basic idea of how you could trigger these shell scripts. So, I'm going to switch over to Git-Init and now we need to create that. So, we'll create a new folder, bin. And we called the file init.sh, for shell. Next we're going to specify that we are working with bash here, and now I will simply run git init, and git add everything, and we will get commit, first commit. All right, that looks good to me, but let's see what happens if we try to run it. So let's just go back to any file here. We're gonna make sure the build system is set to Git-Init, it does. And If I run Cmd+B though we're going to get this permission denied. We'll let's see if we can debug this. Let's try doing it from the terminal first. Let's try to do bin/init.sh, but once again we get that permission denied. Well let's try to do sudo. Well now we're getting command not found. So here's the problem. If we're gonna run a shell script then if we haven't set it up to be an executable we would need to preface that accordingly. We would have to do bash then /init.sh. And now you can see it did create a new repo. If I run git log it also created the first commit. But let's remove that git directory and let's make it executable instead. So we'll do change mod to make it executable, and the path is bin/init.sh. So now when we've made that change alone, I can now run bin/init.sh and it goes ahead and does that for me. Let's remove that again, start over and see if it now works. We go back to our project, we've done our initial work, and now we wanna create the first commit. I run Cmd+B. That will trigger this Sublime build. This build script will then call the init.sh file, and if we did everything right, that should initialize git and create the first commit. All right, let's try it. Cmd+B. And sure enough, it's done that. If we run git log, there we go. So now we know how to compile things like coffee script or SASS. We know how to run things like PHP or Ruby. And we also know how to from a build script trigger something like init.sh or deploy.sh and things of that nature.