DWODENSE - Frontend Workflow - Devdk
-
Upload
devdk -
Category
Technology
-
view
236 -
download
0
description
Transcript of DWODENSE - Frontend Workflow - Devdk
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/