Gulp 4 and Front-end Development in Foundation 6 – Update
I decided to mess with this again. In the development phase I copy the
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.
Gulp 4 Tasks
There are three sets of tasks depending on what mode you want to work in.
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..
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.
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.
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.
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.