foundation_scss
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| foundation_scss [2015/04/01 22:32] – [The Gruntfile.js - Adding and managing Tasks] admin | foundation_scss [2021/12/06 21:53] (current) – removed admin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== 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 | ||
| - | * 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 | ||
| - | |||
| - | <code bash> | ||
| - | npm install -g bower grunt-cli | ||
| - | gem install foundation | ||
| - | </ | ||
| - | |||
| - | ===== Files ===== | ||
| - | |||
| - | ==== Tiny setup Skript: ==== | ||
| - | |||
| - | <code bash setupFoundation.sh> | ||
| - | #!/bin/bash | ||
| - | |||
| - | if [ -z " | ||
| - | then | ||
| - | echo " "; | ||
| - | echo "Set name of your skin variation, mostly ' | ||
| - | echo "eg. > ./ | ||
| - | echo " "; | ||
| - | else | ||
| - | |||
| - | mkdir -p ./$1/lib/ | ||
| - | cd ./$1/lib/ && / | ||
| - | |||
| - | cd ./ | ||
| - | 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 ==== | ||
| - | |||
| - | <code json package.json> | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | ==== jshint Javascript Validation ==== | ||
| - | |||
| - | .. in THEME/ | ||
| - | |||
| - | <code json .jshintrc> | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | |||
| - | ==== The Gruntfile.js - Adding and managing Tasks ==== | ||
| - | |||
| - | Jobs for Grunt: | ||
| - | * SASS Compiler | ||
| - | * JS Compresser | ||
| - | * JS Validator using JSHint | ||
| - | * Spritesheet generator | ||
| - | |||
| - | <code javascript Gruntfile.js> | ||
| - | module.exports = function(grunt) { | ||
| - | // INCLUDE TASKS | ||
| - | require(' | ||
| - | grunt.loadNpmTasks(' | ||
| - | grunt.loadNpmTasks(' | ||
| - | grunt.loadNpmTasks(' | ||
| - | |||
| - | // SHOW TIME FOR EACH TASK TO FINISH - MAKE COMPILING LOOK FANCY | ||
| - | require(' | ||
| - | |||
| - | // ARRAY FOR ALL YOUR JS FILES IN PAGE HEADER | ||
| - | var jsLibs = [' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | |||
| - | // ARRAY FOR ALL YOUR JS FILES JUST BEFORE CLOSING </ | ||
| - | var jsFoundation = [' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | // ARRAY FOR ALL YOUR CUSTOM JS FILES | ||
| - | var jsApp = [' | ||
| - | |||
| - | // CONFIGURE YOUR TASKS HERE | ||
| - | grunt.initConfig({ | ||
| - | pkg: grunt.file.readJSON(' | ||
| - | connect: { | ||
| - | all: { | ||
| - | options: | ||
| - | // MIGHT BE REQUIRED FOR MULTIPLE USERS USING GRUNT ON THE SAME SERVER | ||
| - | hostname: | ||
| - | keepalive: | ||
| - | livereload: | ||
| - | } | ||
| - | } | ||
| - | }, | ||
| - | |||
| - | // SASS COMPILER | ||
| - | sass: { | ||
| - | options: { | ||
| - | includePaths: | ||
| - | }, | ||
| - | dist: { | ||
| - | options: | ||
| - | // CAN BE: nested, expanded, compact, compressed. | ||
| - | outputStyle: | ||
| - | sourceMap: | ||
| - | }, | ||
| - | files: { | ||
| - | ' | ||
| - | } | ||
| - | } | ||
| - | }, | ||
| - | |||
| - | // JAVASCRIPT VALIDATION | ||
| - | jshint: { | ||
| - | options: { | ||
| - | // | ||
| - | jshintrc: | ||
| - | }, | ||
| - | all: [' | ||
| - | }, | ||
| - | uglify: { | ||
| - | options: { | ||
| - | sourceMap: | ||
| - | beautify: | ||
| - | width: 80, | ||
| - | // MAKE JS FILES READABLE true/false | ||
| - | beautify: | ||
| - | }, | ||
| - | }, | ||
| - | dist: { | ||
| - | files: { | ||
| - | // THE NAME AND LOCATION OF JS FILES TO BE WRITTEN to : from Array | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | } | ||
| - | } | ||
| - | }, | ||
| - | |||
| - | // GENERATE SPRITESHEET | ||
| - | sprite:{ | ||
| - | // NO RETINA SETTINGS | ||
| - | dist: { | ||
| - | src: ' | ||
| - | dest: ' | ||
| - | destCss: | ||
| - | cssFormat: | ||
| - | algorithm: | ||
| - | padding: | ||
| - | }, | ||
| - | // RETINA SETTINGS | ||
| - | distRetina: | ||
| - | src: ' | ||
| - | dest: ' | ||
| - | destCss: | ||
| - | cssFormat: | ||
| - | algorithm: | ||
| - | padding: | ||
| - | } | ||
| - | }, | ||
| - | |||
| - | // TRIGGER TASK TO RUN ON "grunt watch" | ||
| - | watch: { | ||
| - | grunt: { | ||
| - | options: | ||
| - | reload: | ||
| - | }, | ||
| - | files: [' | ||
| - | }, | ||
| - | sprite: { | ||
| - | files: [' | ||
| - | tasks: [' | ||
| - | }, | ||
| - | sass: { | ||
| - | files: ' | ||
| - | tasks: [' | ||
| - | }, | ||
| - | js: { | ||
| - | files: [ | ||
| - | jsLibs, jsFoundation, | ||
| - | tasks: [' | ||
| - | }, | ||
| - | livereload: | ||
| - | options: | ||
| - | livereload: | ||
| - | }, | ||
| - | // CHOOSE WHICH FILES YOU WANT TO USE IN livereload | ||
| - | files: [' | ||
| - | tasks: [' | ||
| - | } | ||
| - | } | ||
| - | }); | ||
| - | grunt.registerTask(' | ||
| - | grunt.registerTask(' | ||
| - | }; | ||
| - | </ | ||
| - | |||
| - | ==== _settings.scss Example File ==== | ||
| - | |||
| - | https:// | ||
foundation_scss.1427927530.txt.gz · Last modified: by admin