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/03/31 09:23] – [The Gruntfile.js - Adding and managing Task] 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 ==== | ||
| - | |||
| - | <code javascript Gruntfile.js> | ||
| - | module.exports = function(grunt) { | ||
| - | // INCLUDE TASKS | ||
| - | require(' | ||
| - | grunt.loadNpmTasks(' | ||
| - | grunt.loadNpmTasks(' | ||
| - | |||
| - | // MAKE COMPILING LOOK FANCY | ||
| - | require(' | ||
| - | |||
| - | // ARRAY FOR ALL JS FILES IN PAGE HEADER | ||
| - | var jsLibs = [ | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ]; | ||
| - | |||
| - | // ARRAY FOR ALL FOUNDATION AND OTHER JS FILES JUST BEFORE CLOSING </ | ||
| - | var jsFoundation = [ | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ]; | ||
| - | |||
| - | // ARRAY FOR ALL YOUR CUSTOM JS FILES | ||
| - | var jsApp = [ | ||
| - | ' | ||
| - | ' | ||
| - | ]; | ||
| - | |||
| - | grunt.initConfig({ | ||
| - | pkg: grunt.file.readJSON(' | ||
| - | |||
| - | sass: { | ||
| - | options: { | ||
| - | includePaths: | ||
| - | }, | ||
| - | dist: { | ||
| - | options: { | ||
| - | outputStyle: | ||
| - | sourceMap: false, | ||
| - | }, | ||
| - | files: { | ||
| - | ' | ||
| - | } | ||
| - | } | ||
| - | }, | ||
| - | jshint: { | ||
| - | options: { | ||
| - | jshintrc: ' | ||
| - | }, | ||
| - | all: [ | ||
| - | ' | ||
| - | jsApp | ||
| - | ] | ||
| - | }, | ||
| - | |||
| - | uglify: { | ||
| - | options: { | ||
| - | sourceMap: true | ||
| - | }, | ||
| - | dist: { | ||
| - | files: { | ||
| - | // THE NAME AND LOCATION OF JS FILES TO BE WRITTEN | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | } | ||
| - | } | ||
| - | }, | ||
| - | |||
| - | watch: { | ||
| - | grunt: { | ||
| - | options: { | ||
| - | reload: true | ||
| - | }, | ||
| - | files: [' | ||
| - | }, | ||
| - | |||
| - | sass: { | ||
| - | files: ' | ||
| - | tasks: [' | ||
| - | }, | ||
| - | | ||
| - | js: { | ||
| - | files: [ | ||
| - | jsLibs, | ||
| - | jsFoundation, | ||
| - | '< | ||
| - | ], | ||
| - | tasks: [' | ||
| - | }, | ||
| - | livereload: { | ||
| - | options: { | ||
| - | livereload: true | ||
| - | }, | ||
| - | files: [ | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ] | ||
| - | } | ||
| - | } | ||
| - | }); | ||
| - | |||
| - | grunt.registerTask(' | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | ]); | ||
| - | |||
| - | grunt.registerTask(' | ||
| - | |||
| - | }; | ||
| - | </ | ||
| - | |||
| - | ==== _settings.scss Example File ==== | ||
| - | |||
| - | https:// | ||
foundation_scss.1427793811.txt.gz · Last modified: by admin