DWODENSE 12. AUGUST 2014Front-end workflow and best practices.

HELLO WORLD!

Hvad vi er, hvem vi er og hvad vi laver.

ME.DEVDK.ORGGRATIS BNC - wow, so cheap, much love.

THE POWER OF SASSNo rules, let’s play!

SASSSyntactically Awesome Stylesheets

DON’T BE SASSY, BUT DO IT SASSY.Import, Seperate & Comment

@import 'core/reset';

@import ‘helpers/extends'; @import 'helpers/variables';

// core

// helpers

LET’S NOT OVERDO IT GUYS.Variables, Mixins & Functions

SASS IS A TOOL, USE IT.Naming, prioritizing & cleaning up.

BE CLEVER, NAME IT FOR WHAT IT ISFolder structure

scss style.scss /core _reset.scss _grid.scss /helpers _mixins.scss _extends.scss _variables.scss /pages _profile.scss /sections _header.scss _footer.scss _sidenav.scss

GULP, IT’S NOT PUKEIf you don’t know it, you’re a pussy.

GULP

- og kom igang med det, som det egentlig handler om.

SOUNDS GREAT, BUT HTF* DOES IT WORKAutomated, Stream, Elegant API

* how the fuck

THE BASICS

var gulp = require('gulp'), gutil = require('gulp-util'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), !gulp.task('js', function() { gulp.src(['./src/js/vendor/**/*.js', './src/js/**/*.js']) .pipe(uglify()) .pipe(concat('app.min.js')) .on('error', gutil.log) .pipe(gulp.dest('./public/assets/js')); });

SHITLOADS OF PLUGINSConcat, autoprefixr, cmq, uglify, minifycss, jshint

VERSION CONTROL & DEPLOYMENTKeep that shit synced

LARAVEL ENVOY

SIMPLE TASK

@task('deploy', ['on' => 'web']) cd /var/www/me.devdk.org/ git pull origin master composer update php artisan migrate --seed --force @endtask

THANKS FOR YOUR TIMELet’s have a beer, and make this community the best.

thesassway.com gulpjs.com

youtu.be/mw_xWTkMJEM laravel.com/docs/ssh#envoy-task-runner

LINKS

gifs by madebyradio.com/