Think of this process as an assembly line for your files. This time we call st to save the output of our stream to the css folder. When the sass plugin is done it sends the stream on to the next pipe call. What happens here is that the sass plugin modifies the stream that was created when we loaded sass/style.scss. Inside of this task we take our style.scss file and pipe it through to the sass plugin. Then we define a task, we call the task css. In this file we import gulp and the gulp sass module. Add the following code in there: var gulp = require('gulp') We're all set to actually build our gulpfile now. ![]() Next up, we install the sass compiler: npm install gulp-sass This also applies to any plugins you install. ![]() That will add gulp as a dependency for your project. If you're more familiar with npm and the package.json file that you can add to your project you'll want to run the command with -save-dev appended to it. Let's start by locally installing gulp for our project: npm install gulp In your style.scss files you could write the following contents: $background-color: #b4da55Īllright, we have our setup complete. Create the following folders/files: my_first_gulp/ In this example we are going to use gulp for compiling sass to css. When this is done, you have successfully installed Gulp on your machine! Now let's do something with it. If this doesn't work at once you might have to use the sudo prefix to execute this command. Let's do the global install first: npm install -g gulp To use gulp you need to install it on your machine globally and locally. When you're done you can come back here to follow along. If not go to the node.js website and follow the instructions over there. I'm going to assume you've already installed node and npm on your machine. Let's create your first Gulp task! Installing gulp The gulpfile is your main file for running and using gulp. Now, let's dive in and create our first gulpfile.js! Creating a gulpfile In Gulp's case the output is a compiled and minified css file. You could compare this with an assembly line, you have some input, it get's modified n times and then at the end you get the output. This stream then gets passed on an plugins modify it. This means that you would take a Sass file and Gulp turns it into a so called stream. After that it takes a css file and minifies it. So it might take a Sass file and turn it into compiled css. Grunt uses a configuration file for it's tasks and then it runs all of the tasks in sequence. The way they do it is completely different though. That said, Grunt fulfills the same purpose as Gulp, which is running automated tasks. A tool should help you get your job done better using a tool shouldn't be a goal in itself. I feel like it's important to mention this because if you choose to use a tool like Gulp or Grunt you have to feel comfortable. And also, Gulp is supposed to be faster so that's nice. I don't use Grunt for a very simple reason, I don't like the syntax. What about Grunt?įor those who payed attention, I mentioned Grunt at the start of this article. Like I said, there's no need to rush in and confuse yourself. ![]() Or you could use a graphical tool like Codekit for the time being. You could manually compile your css files as you go. If you feel like you want to learn Sass (or Less) as soon as you start learning css you don't have to learn Gulp as well. When you're starting out as a front-end developer you will have to learn so many things at once I don't think there's much use in immediately jumping in to use Sass, Gulp and all the other great tools that are available. You should learn Gulp whenever you feel like you are ready for it. At this time there's about 1200 plugins available for gulp. This makes Gulp a very small and lightweight utility that can be expanded with plugins so it does whatever you want. The way Gulp does all these things is through plugins. Some more advanced task include:Īnd many, many more. Concatenate javascript files into a single file.When you are developing a website some things you might want to automate are: Gulp is a task runner, it's purpose is to perform repetitive tasks for you. This article will focus on getting you started with Gulp. What is GulpĪfter dropping all these tools in the previous paragraphs you might be confused. The reason I chose Gulp over Grunt? I liked the syntax better and people said it was exponentially faster than Grunt. Personally I got started with Codekit and swapped that out for Gulp later on. So then there is the question, what do I use for that? Well, there's many options for that as well! Some prefer Grunt, others pick Gulp and some others turn to Codekit for this. And then any developer will reach that point where they want to actually compile their css, concatenate their javascript and minify them all.
0 Comments
Leave a Reply. |