Hello Gulp Meet Sass Header

Setting up Gulp and Sass

SASS (Syntactically Awesome Stylesheet)

It is a blessing. Whoever works frontend development for more than a couple of years will tell you the exact same thing. Gulp is a tool that we’ll use to convert and pre-process SASS (or SCSS) into the plain CSS that browsers understand and we’ll make it look like a piece of cake.

“If you think math is hard, try web design.” – Thrish Parr

Inspiring quote to begin with. Now off to work.

Gulp is a build tool which can help you out in a number of tasks when it comes to web development. More often than not, it is on duty with some of these tasks:

  • Compiling CSS with preprocessors like SASS or LESS
  • Optimizing assets
  • Live-reloads when a file is edited/saved
  • Create a quick web server

This doesn’t even scratch the surface of what you can do with Gulp, but it’s quite possible where it finds the largest use. Even thou it’s not too complicated, you’ll still have to learn to really use the Gulp to create tasks, and I’ll give you a hand here.

First of all, why gulp?

Gulp is not the only build tool you can use. There’s a whole army of tools with similar options, Grunt and Brunch to name a couple. The main reason why I love Gulp is because of it’s simplicity.  Configurations with Gulp tend to be quite a breeze, and lemme show you, but first, let’s install Gulp. Make sure you have NPM installed, if you don’t, check out my guide for installing it here.

Next, open up your cmd (as an admin) or terminal, and type:

If you’re on Mac or Linux, you should add sudo as the first word of the code. Like this:

That will enable the global gulp command you can run in the terminal.  (that’s why we used the -g flag)

Let’s create our project, shall we?

Before anything else, let’s create a folder where we’ll host our little experiment, and these ‘test’ folders I like to call “experiments”.
Note, I’ll be using git bash on Windows machine. You have been warned.
All righty. Let’s start by creating a folder experiment in our root and initiating npm project: (you still have terminal running, right?)

This is what you’ll get:

After npm init

Feel free to hack and slash your keyboard with enter key, all the info submitted here.  Awesome. Start your favourite editor into the experiment folder, or use Vim like I do here (a bit higher learning curve on this one, tho). Vim is integrated into the Git bash, so I’ll just use that to make certain edits.

Right now, you have created your npm entry point -> package.json . This folder is where npm looks into and does it’s actual package managing, and a lot more I won’t cover in this lil’ tut.

Next thing, back in the experiments folder, time to install Gulp into the project. This is separate from the global installment of gulp, which we use to run commands. This what we install right now is our ‘staging ground’ for gulp tasks, so to speak. So let’s do it:

Please not the difference that the –save-dev flag has been used here. This means we’ll only use Gulp in development, not in production. Let’s see what that command did. Here’s a screenshot:

With node_modules folder

A-ha! New folder. NPM will use node_modules folder to store all project dependencies, so never-ever manually delete that folder. Important stuff.

Next, let’s just quickly assume we’re gonna have certain folder tree for our experiment. Here’s a list of files/folders you can create:

So, in a lot of projects, actual web site is not served from the root of the project, and we won’t assume that either. Let’s assume our app will run from ‘application’ folder. And don’t forget the gulpfile.js. This is what we’re focusing on this lesson.

My first task

Time to SASS it up? Almost. Let’s open up the gulpfile.js first. And before starting to write gulp tasks, you need to “require” it. JavaScript folks are familiar with this, I’m sure. This is how you use the actual npm packages.

So, once open, enter this line of code in the first line:

The very basic syntax for using gulp is this:

So the task name, the ‘name-of-the-task’ parameter there is what you’ll type out once you start gulp from the termina/bash. Let’s start with fundamental “hello” message:

Let’s go back to terminal and see the fruit of our labor! Enter:

This should be the result of what you’ll get in the terminal:

gulp heya

Awesome! Let’s make it more exiting!

SASS with Gulp

First of all, in order to compile SASS into the CSS, we’ll need a middleware package called gulp-sass. The way we install this is quite simple, really, back to terminal, into the root “experiment” folder and let’s npm install it!

Next stop, if you didn’t guess it, we gotta ‘require’ it into our gulpfile, like this:

Just add it on top, line 2 of the file. Next, last step, we need sass/scss file, right? Create ‘styles.scss‘ file under ‘application/scss/‘ directory.

Now SASS is at our reach! Let’s setup a basic sass/scss compiler:

Let’s create something scss specific into our styles.scss file:

Go back to the root, where your gulpfile is, and run gulp sass command!

run gulp sass

BOOM! Fireworks! National anthem! Cheerleaders cheering! Birds birding… y’know what I mean!

Let’s navigate to our /application/css/ file and see what we have here:

finished task sass

Congrats are in order! You have successfully setup your preprocessor and you can use sass (or scss, whichever syntax you prefer) in your projects!

Stay tuned for additional tutorials on how we can make even more usability out of Gulp! Someone said “Automatic browser refresh upon file save“…?

Click to continue with this series of tutorials…

27 Comments

  • Hello, nice tutorial, I’ve mine set up with gulp-nodemon so I don’t have to restart the server each time, but I have a problem and it’s that when it can’t compile the SASS file (for example, when I have a syntax error) it crashes and I have to restart it. Can you explain in your next post on how to handle this errors to avoid crashing gulp? Thanks in advance!

    • Hey, thank’s for stopping by,

      This is actually very, very simple with gulp. It’s not in the scope of this tut, but I’ll share it with you. No need for a full post on a few lines of code. 🙂

      First of all, include this function in your gulpfile.js:

      Next, in the pipe where the error happens, add .on('error', showError). Example (this’ll be in the next lesson):

      Hope I helped. 🙂
      Lemme know if the problem is solved. 🙂
      If not, feel free to paste your code.

  • Pretty section of content. I just stumbled upon your
    web site and in accession capital to asdsert that I
    acquire actually enjoyed account your blog posts. Anyway I will be subscribing to your feed aand even I achievement you access consistently rapidly.

  • Hi there would you mind stating which blog platform you’re orking with?

    I’m looking to start my own blog sooln but I’m havingg a
    hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask iss because your design seems different
    then most blogs and I’m looking for something completely unique.
    P.S Sorry for getting off-topic butt I had to ask!

    • Hi! 🙂
      Is a little off-topic, but don’t worry about it. 🙂

      I am currently hosting a WordPress platform and in process of creating my sort of “mini-app” (same domain, different subdomain, still didn’t decide which one to use) where I would grant premium content for a sandwich price, probably. 🙂
      Also, to answer your question, it totally doesn’t matter which CMS you decide, the ones you stated all have great support and loads of help with huge community. I’d recommend going with WordPress or Drupal, but if you’ll be posting like newspaper articles then maybe go with Ghost? Ain’t free, but is awesome. 🙂

      As far as my setup goes, it’s a little edited Shamrock theme. 🙂

      Lemme know what you decide to go to and I’ll drop by and check you out. 🙂 Cheers!

  • Writing a SASS + Gulp tutorial in 2017 seems a bit off to me as it is. SASS isn’t the best way to process css for a long time now. PostCSS and its plugins is what you want to teach and learn.

    • I am pretty much going to cover… all I can. 😀
      I gotta start somewhere, and since this was one of the first things I personally learned, why not start here? 🙂

      It’s still relevant to a lot of masses, and a lot of masses still use gulp, otherwise, it wouldn’t receive version upgrades, right? 🙂
      Cheers, great advice tho! 🙂

    • Thank you so much! I’ll be posting at least twice per week, sorry for the “slow” tempo right now, working on a lot of projects atm, but really wanted to start blogging out and helping fellow coders. 🙂

  • What i don’t understood is in reality hhow you’re now not actually much more smartly-favored
    than you might be now. You’re very intelligent. You already know thus
    significantly in terms of this topic, made me forr my part
    believe it frdom a lot of varied angles. Itss like women and men don’t
    seem to be fasconated except it is one thing to accomplish with Lady gaga!

    Your own stuffs excellent. All the time maintain it
    up!

  • I do not know if it’s just me or if everybody else experiencing problems with your website.
    It appears like some of the written text within your content are running off the screen. Can somebody else please provide feedback and let
    me know if this is happening to them as well? This may be a problem with my browser because I’ve had this
    happen previously. Cheers

    • Hi. Thanks for your feedback! 🙂
      I tend to deep-test my sites on various devices and multiple browsers. I haven’t really found any “out of bounds” errors, would you mind sharring a snippet of the snapshot somewhere and sharing the link here? I’m really curious on what happened. 🙂

  • Wow, incredible blog layout! How lengthy have you been blogging
    for? you made running a blog glance easy. The whole glance
    of your site is magnificent, let alone the content material!

    • I was developing WordPress themes for a while now, but I gotta hand this out to the folks over at MeksHQ, since I am full-time full-stack developer and currently working on a large array of things, I couldn’t really afford too much time on this, but I really wanted a quick-start. 🙂
      I’m also preparing (slowly) an app for some “premium” content, featuring video lessons and in-depth tutorials, so stay tuned. 🙂

  • Excellent post. I was checking continuously this blog and I
    am impressed! Very helpful info particularly the last part :
    ) I care for such information a lot. I was seeking this particular information for a very long time.

    Thank you and best of luck.

    • You’re gonna love the next part that’s coming this Monday even more. I’m throwing in some quite convenient tooling in to complete the gulp series. 🙂

  • It’s a shame you don’t have a donate button! I’d
    definitely donate to this outstanding blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk about this website with my Facebook group.
    Talk soon!

    • Heya 🙂
      That’s nice to know, but I want to dedicate this blog and this website for FREE learning experience, I’ve added up a couple of ads just to cover the hosting for now, but I think I’ll eventually get rid of them as well. I will be offering “premium” video lessons and in-depth tutorials… well, not so soon, sadly, I have quite a limited free time a day to allocate for this, but the site will grow steadily and I hope I’ll see you some more in the future. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *