Gulp 4 and Front-end Development in Foundation 6

Gulp and the yeti久しぶり – or as we say , long time no see 😉 , been busy with work, learning, stuff & things. As a web developer you are constantly learning new stuff. Recently I “discovered” the joys of Gulp over at GitHub. It’s a javascript task-runner that compiles, minifies and does just about anything else that is boring while creating sites. In other words, it increases your productivity and brings back the joy of web-dev.

Currently, Gulp 3 is the so called “stable” version, but version 4 is under development. Despite this even the developer says it is ready for prime-time right now. So, what the heck, I moved on to Gulp 4 as it has a far better work-flow.  I’ve done a couple of small projects with Gulp 4, but I really want to do something a little more involved.

Occasionally I take a course on Udemy to fill-in-the-blanks or just for fun. I found one on Foundation 6, using Sass and Gulp, currently only £9!!  Never tried Foundation before so I went for it. It’s quite a good course so far, especially for the price and 18.5 hours of video lessons. The rest of this post will be most useful to those taking this course. Even if you are not taking the course there is, I think, some useful info here if you want to have a go at Gulp 4. As this post is for quite a specific purpose/audience, my next post will explain how to put a gulp 4/ES6 script together.

To save you typing 200+ lines of code I have uploaded the files to GitHub.

Initial Setup

We start off by setting up the development-system. This comprised of installing Git and Node, which any self-respecting developer should already have. Next up I installed the foundation-cli via npm.

npm install --global foundation-cli

Now we are ready to work, navigate to where you want to store the site and type foundation new.  For the first site, Hotel Spa, we  choose the Basic template with Sass compiler setup. We answer a few questions to customize the site, the project directory is created and the dependancies are downloaded.

That’s how it should go but apparently my Git is being a right git! It goes part of the way thru the download process and crashes out with a git clone error. So instead of wasting time troubleshooting, I git cloned directly from the GitHub and I had no problems – go figure…

Once everything is downloaded you go into the folder and type foundation watch.This will compile the sass to css whenever you save any changes. This is a waste of typing! If you look in the directory you will see the gulpfile.js. This means all you have to type is gulp – 4 letters instead of 16!! Still, with the supplied gulpfile, I have to refresh the browser everytime I make a change… Looking at the gulpfile, I noticed it was setup for gulp 3 – bummer 😉

Updating to Gulp 4

For any Mac users reading this, you may need to use “sudo” in front of some or all terminal commands. I will assume if you have read this far you are already familiar/comfortable-ish using the terminal and it’s differences. So these instruction are for directed to the PC user (I am using Windows 7).

Before you go any further you should have reached Section 6: Foundation 6: Working with the Index Page and copied the assets folder from lesson 6 into the HotelSpa directory. If not, go away and come back when you have.

1> Open Windows explorer and go to the HotelSpa directory so that you can see it’s contents.

2> With the mouse over the contents, shift right click and select “Open command window here” or you can just right-click and select “Git Bash Here” which opens the Bash terminal. Your choice, whichever you are more comfortable with.

3> Replace the global gulp with gulp-cli by typing:

npm rm -g gulp
npm install -g gulp-cli

4> Replace the Local gulp 3 with gulp 4 by typing:

npm uninstall gulp --save-dev
npm install 'gulpjs/gulp.git#4.0' --save-dev

5> Verify the install by typing:

gulp -v

You should get something like:

CLI version 1.2.2
Local version 4.0.0-alpha.2

And that’s the initial setup done. Using gulp-cli will NOT stop you from still using gulp 3. This is handy if you have some projects that still use gulp 3 and you are transitioning over to gulp 4.

Updating the gulpfile

This should be easy… Just delete the node_modules directory and the gulpfile.js then add the updated gulpfile.js and run the npm install command, but life is never that easy. I wanted to:

  • Use ES6, the latest shiney new version of Javascript
  • Use browser-sync so that I can test the site on any device I own – not just the PC
  • Browser-sync will also update files and refresh the browser when I save any changes to html, css, js or images
  • Run in “dev” mode so that I can use sourcemaps on the css and js during development
  • Run “prod” mode when it’s finished in which all files are minified
  • Minimize the number of http requests by combining files

This meant I had to add some extra files, move other files and edit the html files. This will take a while so try and get a block of time when you won’t be interrupted. Depending on where you are in the lessons you may have to do things differently to how Juan tells you so you may have to take notes as reminders as you go thru the HotelSpa project. At present I have just finished the index page and not yet started the “inner pages”. As I complete the sections I shall be updating this post and posting in the Questions area in the course.

Directory Structure

Hotel Spa Directory for GulpHere’s a screenshot of my updated directory structure for HotelSpa and what you should end up with (click it for a full-size view). As you can see, HotelSpa is inside a sites directory. This is where I do all my web development/experimenting. I used Xampp for years until recently, when the new version would not install. So for now I am using Mamp although I am very tempted to go for Ampp. With Xampp and now with Mamp I use vhosts so that I can access site via “hotelspa.dev” instead of “localhost:3000”.

Anyways… back to Gulp!

Initial File Structure

I like to keep all source files in a seperate directory to everything else. If you look at the assets directory you will see there are three extra directories css, scripts and scss.

CSS: Create this directory and put the foundation-icons.css file (lesson xx) in there.

SCSS: This was originally in the HotlSpa root directory, just move it into the assets directory.

SCRIPTS: In the HotelSpa directory, rename the js directory to scripts and move it into the assets directory.

Delete:

  • node_modules directory
  • package.json
  • gulpfile.js
  • CHANGELOG.md
  • README.md

I have left the .gitignore file in case you want to save this to GitHub. And yes, I did mean for the gulpfile.js to be deleted as it will not be needed.

Additional/Updated Files:

I shall be using some ES6 features in the gulpfile.js, some editors throw a fit and do not yet recognise ES6 syntax. I use either Brackets or Visual Studio Code depending on my mood and I know that VSC throws a fit. So the first file to add is jsconfig.json and it’s contents are:

{
    "compilerOptions": {
    "target": "ES6"
    }
}

A module called babel is used to transpile, or translate, ES6 into the more universally recognised ES5. For this you will need to add .babelrc and it’s content are:

{
    "presets": ["es2015"]
}

Remember we deleted the gulpfile.js file. This was why! The file is now named gulpfile.babel.js, additionally babel will have to be installed. That will be taken care of by running npm install later.

I have added js and images to the .gitignore file as they are created when you run gulp so you don’t need to save them.

The last file, for now, to be edited is the index.html file. The main bits that need to be changed are:

There were two files app.css and foundation-icons.css. I concatenate them into one file called app.min.css.

All images are now in HotelSpa/images so the links for all 11 images have to be changed.

I want to concatenate those js files at the bottom. there are 4 of them, I’d like to reduce that to 2 or even just 1 – I’m working on it…

I’m not showing you all the edits as you can download all the edited/added files from my GitHub account. You can download the files and put them all in the root of HotelSpa and you are almost finished…

Customize the gulp file

You now need to customize the gulpfile.babel.js file to suit your setup as follows:

Line 33: const PROJECT_URL = 'hotelspa.dev'

As I mentioned earlier I am using Mamp, httpd-vhosts.conf and hosts, so that I can give each of my projects a distinct url. The contents of httpd-vhosts.conf is:

<VirtualHost *:80>
  DocumentRoot 'F:\sites\HotelSpa'
  ServerName hotelspa.dev
</VirtualHost>

And hosts has the line:

127.0.0.1		hotelspa.dev

If you want to do the same kind of thing then you will need to edit to suit where your HotelSpa directory is and what url you will use and in turn edit line 33.

If you are not using vhosts then you will need to edit line 71:

proxy: PROJECT_URL

Replace it with something like:

server: {
    baseDir: "F://sites/HotelSpa" // Change this to your web root dir
}

Where baseDir is the file path to where your HotelSpa directory is.

The default behaviour of browser-sync is to open the default browser (I use Firefox) at localhost:3000. Line 75 should in theory open Chrome but so far it hasn’t worked. YMMV.. If it doesn’t work you can delete it.

Gulp Tasks

Right… if you got thru all of that, well done, you can finally start editing the Hotel Spa site. Before you go entering the gulp commands you should type npm install. This will re-install all the modules that are needed by the gulp file, it will take a couple of minutes. Now you can start gulping – there are just two tasks:

gulp dev

Or just gulp as dev is the default task, this will:

  1. Delete the images, css and js
  2. Create uncompressed images, css and js files. The css and js files will have sourcemaps to help in debugging errors.
  3. Start up the browser and display the site
  4. Start watching the source directories for images, css, js and html files
  5. Whenever you save a change to any of the files the browser window will be updated.

Neat huh? No more having to refresh the browser, just edit, save and see the results almost instantly.

Side note 1: What are sourcemaps?

In case you don’t know. Say for example you have 10 scss files that compile down to one css file. You make an error in one of the scss files. How do you know which file contains the error as the browser’s dev tools will only report the name of the css file. If you have sourcemaps the dev tools will now report the actual scss file instead. Same goes for the js files. Using sourcemaps during development will speed up your debugging and enable you to concatenate mutiple files together without being afraid of not been able to find any potential bugs.

Side note 2: What is browser-sync?

For the longest time developers have used a browser add-on named livereload. This simply refreshed the browser window when you saved changes to a file. Then along came browser-sync which went way beyond just refreshing the browser. The differences are:

  1. In the case of css, updated styles can be “injected” to the browser, this saves time having to reload everything every time you make a change.
  2. On your tablet, phone or whatever device if you visit localhost:3000 you can view the page. If you scroll or otherwise manipulate the page on one device it happens on all the other displays in synch. Great for testing out responsive pages.
  3. Related to the last point, if you have multiple different browsers open, their displays are synched together so that you can test for differences in browser rendering.
  4. If you are developing a site for a client, you can use the “tunnel” option so that while you have browser-sync running, you supply the client with a url and they can view the site wherever they are. This feature can save you the hassle of creating a staging site for the client to preview the site.

gulp prod

Once you have finished the site you use gulp prod to create the minified or compressed versions of the images, css and js.

This is not really useful just yet as I haven’t yet got a handle on just which Foundation files are needed. Once I have, I shall be able to concatenate and minify them along with the images, css and js so that only the needed stuff can be saved to a separate distribution directory. I may also add browse-sync to it so a final test view can be performed.

Wrap up

Well that’s it so far. The development side is working as I want, the production still needs work. As I complete the inner pages, this post and GitHub will be updated to reflect the changes. I welcome any suggestions for improvement of the code. I found gulp about 3 weeks ago and last week I started learning ES6 so I know my coding is a bit rough around the edges. But, I learn from doing so this Foundation 6 course is a good way of doing that.

Thank you for reading this far, over 2300 words, but there was a lot of ground to cover. There are 3 other projects in the course, they all use gulp. Depending on which template they start with I might have to convert them as well.  I can’t wait to get to the WordPress project as I would like to see how that project has been structured and gulpified.

If you are not taking the course don’t fret, I shall soon be writing at least a couple of gulp/ES6 related posts so that anyone can use and apply it to their own projects.

Finally, if you have any comments or suggestions please let me know below…

Update: There was too much to add to an already long post here and so you will find the update here.

You may also like...