gulp.js - The streaming build system
- Foundation 5
- Gulp
- Gulp - Compass
- Gulp - Concat
- Gulp - Connect
- Gulp - If
- Gulp - Imagemin
- Gulp - Minify - Css
- Gulp - Minify - Html
- Gulp - Uglify
- Gulp - Util
- Gulp - Webserver
- imagemin-pngcrush
You need to install the following on your workstation:
Install nodejs
http://nodejs.org/
Install Ruby. if you're on a Mac it's already installed. Not sure?
ruby --version
If you're on Windows
http://rubyinstaller.org/
Grab a copy of Foundation 5
Download the latest release
Clone this repository or download to the desktop
https://github.com/peterajones/gulp-workflow-for-foundation5
- Rename the Foundation 5 directory to reflect your project
- Copy the following files and folders from this repo to your project directory root.
. |--gulfile.js |--index.html |--index.php |--package.json |--/img |--/slick
This will overwrite Foundation's index.html file, but that's OK. You need to do this to complete the installation instructions.
You should have a file structure in the root of your project folder that looks like this:
. |--/css |--/img |--/js |--/slick |--gulpfile.js |--humans.txt |--index.html |--index.php |--package.json |--README.md |--robots.txt
Open your project in a text editor like Sublime text. Navigate to the gulp file.js and follow the instructions at the top of the page.
If you go the text editor route, place you editor beside your browser for maximum effect and efficiency.
Open up the terminal (or command line prompt) and navigate to your project directory. Run this command to install the dependencies: (You may need to prepend the sudo command on a Mac.)
[sudo] npm install
This will install all dependencies in a directory called node_modules at root level.
Check for updates:
[sudo] npm-check-updates -u
This will download any new dependencies and upgrade the 'package.json' file automatically.
This is where you will be doing your project development.
Run this command from the terminal to build the development environment:
gulp devSetUp
This will create a ''builds' folder in the root directory and inside there will be a 'development' directory which is where you will do your work.
Back in the command line, you will need to exit the currently running proccess by typing:
ctrl +C
Then run
gulp dev
This will start the development server.
Point your browser to:
The rest of the setup instructions should now appear in your browser. For the sake of clarity, I will continue the instructions here.
Open this index.html file (not the index.html file in the root directory) in a text editor
./builds/development/index.html
and make some changes to the h1 tag around line 25 and save the file. If you have your browser setup beside your text editor you will automatically see your changes.
Pretty cool, huh?
If you view the source code, you can see that we are making five calls to external files:
- css/normalize.css
- css/foundation.css
- js/vendor/modernizr.js
- js/vendor/jquery.js
- js/foundation.min.js
The modernizr.js file is not needed in all projects so I will leave it up to you whether or not to remove the call to modernizr in this file.
Lastly, I will set up a new gulp task to concatenate the two javascript files into a new, unique js file, thus reducing our calls to external files to three.
You will have to do two simple things in this file:
builds/development/index.html
- Remove one of the links to the two css files (top of page) and re-name the remaining link to point to css/app.css.
- Remove one of the links to the two js files (bottom of page) and re-name the remaining link to point to js/app.js.
Like I said before, its up to you what to do with the call to modernizr.js.
Save your changes. You won't notice any difference in the browser, but what has happened here is that the two css files have been merged into one file named 'app.css' and the two js files have been merged into one file named 'app.js'. Two calls instead of four!
To make your life easier (so you don't have to mess with Foundation's CSS or the JS files), just create two new files called 'myCSS.css' and 'myJS.js' and put them in builds/development/css and builds/development/js respectively. Now you can tweak your project using these two new files as they will be appended to the app.css and app.js files.
Once you have done this, try adding this to your myCSS.css file.
body{
background: rgba(0, 198, 255, 0.13);
}
Hit save and checkout the new background colour.
Just to prove that the myJS.js file will work as well, add
function myFunction() {
window.alert('This rocks');
};
to that file. When you save the file, the browser will show an alert message when you click the button. You need to be in the browser for this and a refresh might be required.
To add your own styles and functionality, you only have to add it to these two files.
When we move to production, only the two app files will get imported and minified greatly reducing the size of the project.
Foundation has deprecated the Orbit slider in favour of "Slick - the last carousel you'll ever need". It is very flexible and great for touch devices as well.
If the sample doesn't look right (builds/development/index.html), add this code to the myJS.js file:
$(document).ready(function() {
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
speed: 2000,
autoplay: true,
autoplaySpeed: 3000,
});
});
To see the slider buttons correctly, you will have to adjust some paths in slick.css. Around line 6, change the path to ajax-loader.gif to:
../img/ajax-loader.gif
and change the path to the fonts ( 5 instances ) around line 25 from fonts/. to:
../fonts/font.ext
Check out the feature set here
Now that you have modified your web site and are happy with the results, it is time to move it to the production environment. These are the files that you will deploy to the production server. The only files that we are going to move are the essential ones like the
.html, .css, .js, .txt and the image assets.
These files will be minified, uglified or compressed as needed. The point is to make the smallest and fastest loading web site possible.
There is only one command to run to achieve this.
Back in the command line, quit the previous proccess if it is still running
ctrl + C
and then type
NODE_ENV=production gulp prod
and hit the enter key.
Once you run this command, all of the necessary files will be built to your builds/production/ directory (which doesn't even exist yet until you run this command!)
This workflow has started a new web server in builds/production. If you look at the source code you will see a minified version of the HTML. A quick look at the app.css or app.js files in your editor, you can verify that the same thing has happened. Good luck editing any of those files!
The point is making your web site fast! Check out how big your
builds/development/directory
is, and compare it to your
builds/production/directory
If you have followed all of these instructions you will see that the builds/development/ directory is ~ 1.1MB on disk compared to the builds/production/ directory which weighs in at ~ 328 KB on disk (340 KB if you included modernizer.js). That's a savings of more than 60% to the size of your site when it goes to the production server! of course your mileage will vary depending on the assets you add to the project, but the point is well made that you will save big time in the end.
- You have setup your workstation with global installs of GIT, NODE, RUBY (if on a widows box) and GULP. Optionally you can globally install SASS, COMPASS and BROWSERIFY, if you need them - links are in the README.md file.
- You have installed the NPM dependencies by running npm install in the command line.
- You have checked for any updates to the NPM dependencies by running npm-check-updates -u in the command line which downloaded any updates AND updated the package.json file.
- You followed the instructions at the top of the gulpfile.js file and ran gulp devSetUp to create the development environment in builds/development/.
- You altered the builds/development.index.html and saw your changes in livereload.
- You reduced the number of calls to external files.
- You added your own .css and .js files for adding your styles/functionality and overrides.
- You learned how to add a slider. 9.Lastly, you built the production environment where all of your files and images have been minified.
Now it's time to start working on your Foundation 5 project.
Use this file to start building your project:
builds/development/index.html
Just a reminder:
To start your development web server to reflect the changes in your browser, go back to the terminal and type:
gulp dev