Next, we need to add a one more file to our project. There is no need for the command line on this one. Simply head to and download the package for your system. To get gulp and any other plugins to work correctly, we need to first install Node. The contents of my project are as follows: /gulp-playground -/css -/img -/js - /dist - /dev - main.js - /sass index.html 2. My project starts with a simple folder I’ll call gulp-playground. Once you get familiar with the command line and using Node, Gulp and more you should check it out. One that comes to mind that I use often is Yeoman. I’m starting from scratch, but you should know there are awesome tools out there that provide automation for a lot of projects which can save loads of time. Let’s set up a basic project using Gulp and a few more dependencies. The more you use it the more you’re going to like it and depend on it in your upcoming projects. From there you can use the project code to install more dependencies or just get used to gulp itself. We’ll then install some plugins and give them a try. Below I’ll walk you through the process of getting a project set up with Gulp for the first time. Installing gulp and making use of it is done in as little as 4 steps. Gulp itself is a module you have to download using Node. Each package you install has instructions to go along with it that are pretty easy to understand. Luckily, if you’re new to the command line, Gulp is fairly straight forward. Basic Command Line StuffĪs with most task runners that don’t have a GUI, (graphical user interface) some prior knowledge/familiarization with the command line is definitely preferred before you dive deep with Gulp. As long as your team has this info everyone should be able to make use of the same code and install the same dependencies. This file tells Gulp and Node what the project depends on to get up and running. Dependencies and various settings are configured inside a file called package.json. It’s especially useful for teams based on how you set up a project. Gulp can work on any system with Node.js installed. While it’s possible using a Codekit specific language, you still have to assume your team is all on Macintosh based computers which is limiting from the get go. The problem with Codekit is its ability to work within most teams. At its core, Codekit does what Gulp can do but provides you with a very attractive interface. When I first got into task-runners I used an app called Codekit which I still make use of for private projects. You can pretty much bet that a number of plugins will continuously rise, thus making our lives as developers a little bit easier. At this time, there are 1866 plugins to choose from on the gulp.js website and probably more open-sourced plugins on Github. It’s incredibly fast and with a little setup time you can save many headaches down the line.Įxamples of what can Gulp do (with the addition of various plugins)Īnd that’s only scratching the surface. This system allows you to chain or pipe your code through a bunch of available plugins which alter and enhance your code as you do any type of build. Gulp is a JavaScript task runner built on top of Node.js that offers a streaming build system at its core. Task runners effectively save time and provide a hand with otherwise mundane tasks we used to have to do like refreshing your browser or checking to make sure your markup is valid. As you code HTML or CSS, (tons of other languages can be used with Gulp) for example, a task runner can help you by doing things such as code minification or linting to make sure your code is up to spec. By nature, it doesn’t do anything until you tell it to. A task runner is a set of scripts that automate your workflow during development. To understand what gulp is you first have to understand what a task runner is. If you are coming from an app like Codekit or Prepros then this will hopefully get you off the ground in no time. This article will discuss Gulp from the point of view of a beginner. Over the past few years, Gulp has gained a lot of popularity and stands out among the community. Well, Gulp is among a number of task runners available for designers and developers to use in virtually any type of project. It’s pretty much our job to do this, as the web and appsphere are constantly growing. Like many other designers and developers, I too always strive to stay on top of the latest tools, standards, and more when it comes to building websites. If you have been developing websites in the past year or so you have probably heard the term gulp mentioned often.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |