This is an old revision of the document!

---

Foundation SCSS mit Grunt

Was tuts Aktuell?

• Es zieht die einzelnen CSS Dateien und verarbeitet diese wie compass
• Es zieht die einzelnen JS Dateien aus Foundation + gewünschte Libraries und verarbeitet diese wie compass
• Es nudelt JS Dateien durch JS-Hint, wenn das Fehler wirft kann glaub Jenkins eingreifen.

Evtl. blöd

• compass kann Sprites generieren, ob das Grunt kann, ich denke ja aber im Moment wohl kaum benötigt.

Was fehlt noch?

Ein parameter mit dem man JS und CSS mit debug info und unkomprimiert ausgeben kann.

Setup

Install dependencies

npm install -g bower grunt-cli
gem install foundation

Files

Tiny setup Skript:

setupFoundation.sh

#!/bin/bash
 
if [ -z "$1" ];
	then
		echo " ";
		echo "Set name of your skin variation, mostly 'default' !";
		echo "eg. > ./setupFoundation.sh default <";
		echo " ";
	else
 
		mkdir -p ./$1/lib/
		cd ./$1/lib/ && /root/.rvm/gems/ruby-2.1.2/bin/foundation new foundation --libsass
 
		cd ./foundation/
		bower install --allow-root
		npm install grunt
		npm install grunt-sass
		npm install grunt-contrib watch
		npm install grunt-contrib-jshint
		npm install grunt-contrib-uglify
 
fi

Package requirements NodeJS

package.json

{
  "name": "T1.Foundation",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://rm.tagwork-one.de/git/t1_foundation"
  },
  "devDependencies": {
    "node-sass": "~2.0.1",
    "grunt": "~0.4.5",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-sass": "~0.18.0",
    "time-grunt": "~0.3.2",
    "load-grunt-tasks": "~0.6.0"
  }
}

jshint Javascript Validation

.. in THEME/default/lib/foundation/:

.jshintrc

{
  "bitwise": true,
  "browser": true,
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "esnext": true,
  "immed": true,
  "jquery": true,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "node": true,
  "strict": false,
  "trailing": true
}

The Gruntfile.js - Adding and managing Tasks

Jobs for Grunt:

• SASS Compiler
• JS Compresser
• JS Validator using JSHint
• Spritesheet generator

Gruntfile.js

module.exports = function(grunt) {
	// INCLUDE TASKS
	require('load-grunt-tasks')(grunt);
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-spritesmith');
 
	// SHOW TIME FOR EACH TASK TO FINISH - MAKE COMPILING LOOK FANCY
	require('time-grunt')(grunt);
 
	// ARRAY FOR ALL YOUR JS FILES IN PAGE HEADER
	var jsLibs = ['bower_components/foundation/js/vendor/jquery.js',
		'bower_components/foundation/js/vendor/jquery.cookie.js',
		'bower_components/foundation/js/vendor/placeholder.js',
		'bower_components/foundation/js/vendor/fastclick.js',
		'js/header.js'];
 
	// ARRAY FOR ALL YOUR JS FILES JUST BEFORE CLOSING </BODY>-TAG
	var jsFoundation = ['bower_components/foundation/js/foundation/foundation.js',
		'bower_components/foundation/js/foundation/foundation.abide.js',
		'bower_components/foundation/js/foundation/foundation.accordion.js',
		'bower_components/foundation/js/foundation/foundation.alert.js',
		'bower_components/foundation/js/foundation/foundation.clearing.js',
		'bower_components/foundation/js/foundation/foundation.dropdown.js',
		'bower_components/foundation/js/foundation/foundation.equalizer.js',
		'bower_components/foundation/js/foundation/foundation.interchange.js',
		'bower_components/foundation/js/foundation/foundation.joyride.js',
		'bower_components/foundation/js/foundation/foundation.magellan.js',
		'bower_components/foundation/js/foundation/foundation.offcanvas.js',
		'bower_components/foundation/js/foundation/foundation.orbit.js',
		'bower_components/foundation/js/foundation/foundation.reveal.js',
		'bower_components/foundation/js/foundation/foundation.slider.js',
		'bower_components/foundation/js/foundation/foundation.tab.js',
		'bower_components/foundation/js/foundation/foundation.tooltip.js',
		'bower_components/foundation/js/foundation/foundation.topbar.js', ];
	// ARRAY FOR ALL YOUR CUSTOM JS FILES
	var jsApp = ['js/app.js', 'js/_*.js'];
 
	// CONFIGURE YOUR TASKS HERE
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		connect: {
			all: {
				options: {
					// MIGHT BE REQUIRED FOR MULTIPLE USERS USING GRUNT ON THE SAME SERVER
					hostname: '0.0.0.0',
					keepalive: false,
					livereload: true
				}
			}
		},
 
		// SASS COMPILER
		sass: {
			options: {
				includePaths: ['bower_components/foundation/scss']
			},
			dist: {
				options: {
					// CAN BE: nested, expanded, compact, compressed.
					outputStyle: 'expanded',
					sourceMap: false,
				},
				files: {
					'../../css/foundation.css': 'scss/app.scss'
				}
			}
		},
 
		// JAVASCRIPT VALIDATION
		jshint: {
			options: {
				//  CHANGE JSHINT SETTINGS IN FILE
				jshintrc: '.jshintrc'
			},
			all: ['Gruntfile.js', jsApp, 'js/header.js']
		},
		uglify: {
			options: {
				sourceMap: false,
				beautify: {
					width: 80,
					// MAKE JS FILES READABLE true/false
					beautify: true
				},
			},
			dist: {
				files: {
					// THE NAME AND LOCATION OF JS FILES TO BE WRITTEN to : from Array
					'../../js/libs/header.min.js': [jsLibs],
					'../../js/libs/foundation.min.js': [jsFoundation],
					'../../js/tagwork.app.min.js': [jsApp]
				}
			}
		},
 
		// GENERATE SPRITESHEET 
		sprite:{
			// NO RETINA SETTINGS
			dist: {
				src: 'images/*.png',
				dest: '../../images/sprite.png',
				destCss: '../../css/sprite.css',
				cssFormat: 'css',
				algorithm: 'binary-tree',
				padding: 2
			},
			// RETINA SETTINGS
			distRetina: {
				src: 'images_retina/*.png',
				dest: '../../images/sprite_retina.png',
				destCss: '../../css/sprite_retina.css',
				cssFormat: 'css',
				algorithm: 'binary-tree',
				padding: 2				
			}
		},		
 
		// TRIGGER TASK TO RUN ON "grunt watch"
		watch: {
			grunt: {
				options: {
					reload: true
				},
				files: ['Gruntfile.js']
			},
			sprite: {
				files: ['images/*.png','images_retina/*.png'],
				tasks: ['sprite']
			},
			sass: {
				files: 'scss/*.scss',
				tasks: ['sass']
			},
			js: {
				files: [
				jsLibs, jsFoundation, '<%= jshint.all %>'],
				tasks: ['jshint', 'uglify']
			},
			livereload: {
				options: {
					livereload: true
				},
				// CHOOSE WHICH FILES YOU WANT TO USE IN livereload
				files: ['../../js/libs/header.min.js', '../../js/tagwork.app.min.js', '../../css/foundation.css', '*.php', '*.html'],
				tasks: ['jshint', 'uglify', 'sass']
			}
		}
	});
	grunt.registerTask('build', ['sprite', 'jshint', 'uglify', 'sass']);
	grunt.registerTask('default', ['sprite', 'build', 'watch']);
};

_settings.scss Example File

https://github.com/zurb/foundation/blob/master/scss/foundation/_settings.scss