Gulp 4 and Front-end Development in Foundation 6 – Update

I have just finished the first gulp 4 – foundation 6 conversion project and thought I had better get this post down before I forget what I did. So in no particular order here goes:

Directory Structure

I decided to mess with this again. In the development phase I copy the videos directory to the root. The Foundation Javascript files are now in the root js directory as well. This means that all the files the site uses are now out of the assets folder and you should go through the html files and edit the image, video and javascript paths.

Vendor Javascript

I have now got the Jquery and two plugins concatenated into one file. While in production mode they are minified as well as concatenated. Initially, when I concatenated the files the site would not work. Looking at the vendorjs.min.js I discovered that Jquery was at the end of the file instead of the beginning.

Searching the npm site I found gulp-order which allows you to put multiple files in any order you want. This works brilliantly! I now have only two http requests for javascript, one for the vendor’s js and one for my custom js.

Gulp 4 Tasks

There are three sets of tasks depending on what mode you want to work in.

– Development

gulp dev:build – This will put all files into place and start watching files for changes as well as displaying the results in your browser. You can also use just gulp if you’re feeling lazy..

– Production

gulp prod:iniz – This copies files to their respective places but also minifies, compresses and/or concatenates where needed.

gulp prod:build – This does the same as gulp prod:iniz but also kicks off the watch cycle and displays in the browser. You can use this mode for development but updating can be slower because of the extra work that Gulp 4 is doing in compressing files.

– Distribution

gulp dist:iniz – Once Development is over and you are happy with the output in Production mode you will probably want to upload the results. This task will create a dist directory and copy all required files into it. This saves you having to figure out which Foundation/plugin files you need as per lesson 62 in the Foundation 6 course. All you need to do is copy the contents of the dist directory to your server and you’re done.

Compression Stats

By using the concat, minify and compress total file size was reduced from 15.9MB to 15.1MB saving .8MB. Most of the file-size was in the videos which totalled 10.6MB. There were 4.03MB of images and this compressed to 3.87MB – a 2% saving.

Conclusion

As far as I am concerned this has been a worthwhile experiment. I have encountered a few problems and have been able to solve them mostly on my own. I’m still not sure if I like Foundation or not. Foundation is much like Bootstrap in that the code is littered with non-semantical css and data-this and data-thats. The last few days I have been reading up on Susy, a css grid system for Sass. Once I have finished this course I shall have a play around with it. The biggest saving was in the css and javascript files, originally totalling 1.21MB they were squeezed down to 297KB!!

With Gulp 4, I have learnt a bit more and found a couple more useful modules/plugins. I have updated the GitHub repository it now also contains all the html files in case you are having path problems. As always, if you have any questions or suggestions, write ’em in the box below. Next post will be the start in a series on Gulp 4 itself.