Let The Robots Win!
Why?
It will save you time.
Time = $$ || Time = Fun Stuff
Storytime
Develop Locally
Develop Locally
MAMP
WAMP
XAMP
Desktop Server
VirtualBox
*Check out roots.io
Back to the story...
Use Git
Github
Bitbucket
Back to the story...
a{
color: #efefef;
font-family: 'Open Sans', serif;
}
.looks-like-link{
color: #efefef;
font-family: 'Open Sans', serif;
}
h1,h2 {
color: #0000ff:
font-family: 'Open Sans', serif;
}CSS Preprocessors
$grey: #efefef;
$blue: #0000ff;
$font-sans: 'Open Sans', serif;
a{
color: $grey;
font-family: $font-sans;
}
.looks-like-link{
color: $grey;
font-family: $font-sans;
}
h1,h2 {
color: $blue:
font-family: $font-sans;
}SASS
LESS
Back to the story...
Javascript Minifying
Image Minifying
CSS Minifying
Many Others!
That's a lot of tools!?
Task Automators
Super Powerful!
Minify js, css, img
Browser Reloading
5121 tasks in Grunt library
Where to start?
Codekit
- Easy setup
- Compiles SASS or LESS
- Minifies javascript
- Browser refreshing
- Setup projects with a number of different frameworks
*Limited Customization
Grunt / Gulp
Runs on Node.js
Provides js framework outside of your browser
Run from the command line
Take the time to learn the command line. Just the basics is a huge help!
Great guides
gruntjs.com
Basic Project Setup
- Uglify
- SASS
- Autoprefixer
- Watch
Requires a config file
Grunfile.js
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configs go here
});
};Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');Gruntfile.js
grunt.registerTask('default', ['uglify', 'sass', 'autoprefixer', 'watch']);
grunt.registerTask('css', ['sass', 'autoprefixer']);Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configs go here
});
};
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['uglify', 'sass', 'autoprefixer', 'watch']);
grunt.registerTask('css', ['sass', 'autoprefixer']);Gruntfile.js
Individual Tasks
Gruntfile.js
Uglify
uglify: {
build: {
src: 'assets/js/src/style.js',
dest: 'assets/js/build/style-min.js'
},
options: {
mangle: false
}
},Gruntfile.js
SASS
sass: {
dist: {
files: {
'assets/css/tmp/theme.css': 'assets/css/src/theme.scss'
},
options: {
style: 'compact'
}
}
},Gruntfile.js
Autoprefixer
autoprefixer: {
dist: {
files: {
'assets/css/build/theme.css': 'assets/css/tmp/theme.css'
}
}
},Gruntfile.js
Watch
watch: {
scripts: {
files: ['assets/js/src/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
styles: {
files: ['assets/css/src/*.scss'],
tasks: ['css'],
options: {
spawn: false,
}
}
},module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'assets/js/src/style.js',
dest: 'assets/js/build/style-min.js'
},
options: {
mangle: false
}
},
sass: {
dist: {
files: {
'assets/css/tmp/theme.css': 'assets/css/src/theme.scss'
},
options: {
style: 'compact'
}
}
},
autoprefixer: {
dist: {
files: {
'assets/css/build/theme.css': 'assets/css/tmp/theme.css'
}
}
},
watch: {
scripts: {
files: ['assets/js/src/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
styles: {
files: ['assets/css/src/*.scss'],
tasks: ['css'],
options: {
spawn: false,
}
}
},
});
};
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['uglify', 'sass', 'autoprefixer', 'watch']);
grunt.registerTask('css', ['sass', 'autoprefixer']);What We've Covered
- Develop Locally
- Use Git
- Use CSS Preprocessors
- Task Automators are your friend
So Much Time!
Let The Robots Win
By Dustin Yoxall
