Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Getting started with Gulp

Thursday, September 14th, 2017 by Servage

gulpGulp is a task runner for JavaScript that can automate away repetitive tasks so you can focus on coding instead. Gulp is an extremely versatile tool that can automate tasks from transpiling SCSS to live reloading with Browsersync. Let’s have a look at some of the most useful tasks you can automate with Gulp and a quick look at how to set it up.

Transpiling SCSS

Using a CSS preprocessor like Sass is quite common these days, especially when working with front-end frameworks because of how well it integrates with them. Sometimes it can be quite confusing to set up an automated transpiler that converts SCSS to CSS. Gulp makes this possible with only a few lines of JavaScript. You can even combine multiple SCSS files into one final CSS file to lower the amount of HTTP requests a browser has to make. It’s also possible to autoprefix properties to add support for older browsers.

Transpiling can be done manually by running a terminal command or automatically by running it in a watching mode.

Testing with Browsersync

Browsersync is a handy tool that you can use to test your web designs on multiple browsers and devices at the same time. Gulp can integrate with Browsersync and automatically inject new CSS style sheets to the web page you have open in your browser(s) without having to reload the page. Gulp does this when it detects a change in your SCSS files and after it has transpiled the files to CSS.

If you make changes to HTML files and want to reload the web page automatically, you can set Gulp to do that for you too! Gulp will reload all your browsers connected to Browsersync without you having to do it manually all the time when a small change is made.

Getting Started

To use Gulp in your project, you have to install it using npm first: “sudo npm install -g gulp”. After this, you have to create a gulpfile.js in the root folder of your project. Gulp uses this configuration file to determine what it should do when you run it.

New Gulp tasks are created using by storing the “gulp” dependency in a variable and calling the task() method of it. Each time you call task(), you pass it an anonymous function telling what Gulp should do. The following task transpiles the file scss/style.scss to css/style.css: gulp.task(‘sass’, function () { return gulp.src(‘scss/style.scss’).pipe(sass()).pipe(gulp.dest(‘css/css’)) }). You can run the task in a terminal by typing “gulp sass”. For this task to work, you also have to install the gulp-sass package using npm and include it in gulpfile.js: var sass = require(‘gulp-sass’).

You might want to customize the task for your needs, for example by making it watch for changes in your files instead of only running the task once. To find out more about how to configure Gulp, have a look at the documentation on GitHub at https://github.com/dlmanning/gulp-sass.

Getting started with Gulp, 4.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.