Gulp + Sass + LiveReload + Foundation

gulp_sass_livereload_foundation.md

Gulp + Scss + LiveReload + Foundation

Goals

Set up a boilerplate Gulp + Scss + LiveReload + Foundation 5 workflow that:

1. watches for any scss changes, then compiles scss source into css
2. watches for any changes in the public directory, triggers live-reload
3. serves your static content in public/

Required Dependencies

If you do not have npm, gulp, or bower on your computer you need to install them. If you already have installed these, you do not need to run these commands.

to install npm
brew install npm

to install gulp
npm install -g gulp

to install bower
npm install -g bower

Install the node modules requires for this project.

1. Initialize your project with a package.json file

   npm init
   

2. Install and save required dependencies:
   npm install -D gulp
npm install -D gulp-sass
npm install -D gulp-connect

Set up gulpfile.js in your root directory.

Contents of gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');

gulp.task('connect', function(){
  connect.server({
    root: 'public',
    livereload: true
  });
});

gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
      .pipe(sass({ 
        errLogToConsole: true,
        sourceComments: true,
        includePaths: ['bower_components/foundation/scss']
      }).on('error', sass.logError))
      .pipe(gulp.dest('./public/css'));
});

gulp.task('livereload', function (){
  gulp.src('./public/**/*')
  .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
  gulp.watch('./public/**/*', ['livereload']);
});

gulp.task('default', ['connect', 'watch', 'sass']);

Set up your project directory

1. Set up a sass directory in your root directory. This directory should contain:
   • styles.scss
   • partials directory
2. Set up a public directory in your root directory. This directory should contain:
   • index.html
   • js directory
   • css directory

Set up your index.html file.

• generate a base html5 template
• include a link that loads /css/styles.css
• include an h1 with some text.

Test your gulp task

1. Write the 'hello world' of scss in the styles.scss file.

   $bright : #FF0000;
   
   body {
     background: $bright;
   }
   

2. Run gulp in your terminal
3. Check localhost:8080. The background should be red. Also, if you open the styles.css file in SublimeText, you will see output css with:

   body{ background-color:#FF0000 }
   

4. Test LiveReload and check if the browser color changes automatically if you change the value of $bright.

Setting Up SASS Foundation

Initial Install

1. initialize bower config bower init
   say yes to all
2. install foundation, bower install -S foundation

Set up your partials & import foundation components.

1. Copy the foundation _settings.scss partial from bower_components foundation into your sass/partials directory
2. At the top of your styles.scss file, import the settings partial:

   @import "partials/settings";
   

3. Then import the Foundation components you want to use:

   @import "foundation/components/[component name]";
   

Look at the main foundation.scss in the bower_components foundation scss folder to see all the available components.

Copy over js dependencies to /public/js/

Copy over the necessary js files from bower_component/foundation/js/ into /public/js. At minimum you need:

foundation.min.js
jquery.js
modernizer.js

However, if you are only using certain foundation components, you can opt to use only the ones required for the components instead.

Modify your index.html

Add necessary script tags to import the foundation, jquery, and modernizer js files to the bottom of your file, before the closing </body> tag. It will look similar to the following, however your src paths may be slightly different:

<script src="/js/vendor/modernizer.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

Add the script to initialize foundation after the above scripts and before the closing </body> tag.

<script>
   $(document).foundation();
</script>

In order for the webpage to render and scale properly on mobile devices, add this meta tag to the <head>:

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Test your Set Up

1. You may need to stop and restart gulp, since you added new files to the project.
2. Look at public/css/styles.css. Check if all of the foundation components that you imported are compiled.
3. Drop in some Foundation markup that utilizes both css and js (like the top-bar) into your index.html and test if the component works.

Note

Whenever you add new files to your public/ directory (like images or javascript), you may need to kill then restart your gulp task.

Git

Once gulp, scss, and livereload are wired up correctly...

1. Set up a .gitignore file in your root directory to make sure that Git ignores the following directories: node_modules/ and bower_components/
2. Commit your new files