User Tools

Site Tools


foundation_scss

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. :?:
  • Generiert Sprites, auch in Retina
  • Kanns CSS und JS in komprimiert oder lesbar ausspucken

Setup

Install dependencies

npm install -g bower grunt-cli

GIT - Versioning required files

  • Gruntfile.js
  • package.json
  • bower.json
  • scss/*
  • js/*
  • images/*
  • images_retina/*

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/
		git clone http://the.repo.to/clone/from
		cd ./foundation/
		bower install --allow-root
		npm install
fi

Bower Package requirements

bower.json
{
  "name": "T1.Bower",
  "dependencies": {
    "foundation": "~5.5.1",
    "jquery": "~2.1.3",
    "fastclick": "~1.0.6",
    "foundation-icons": "*",
    "jquery-placeholder": "~2.1.1",
    "jquery.cookie": "~1.4.1",
    "modernizr": "~2.8.3"
  }
}

NodeJS Package requirements

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",
    "grunt-contrib-compass": "~0.7.0",
    "grunt-spritesmith": "~4.5.1",
    "grunt-contrib-connect": "~0.9.0",
    "grunt-contrib-jshint": "~0.11.0",
    "grunt-contrib-uglify": "~0.8.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 Compressor
  • 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

foundation_scss.txt · Last modified: 2015/04/02 10:17 by admin