Time = $$ || Time = Fun Stuff
MAMP
WAMP
XAMP
Desktop Server
VirtualBox
*Check out roots.io
Github
Bitbucket
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;
}
$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
Javascript Minifying
Image Minifying
CSS Minifying
Many Others!
Minify js, css, img
Browser Reloading
5121 tasks in Grunt library
*Limited Customization
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']);
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']);
Individual Tasks
Uglify
uglify: {
build: {
src: 'assets/js/src/style.js',
dest: 'assets/js/build/style-min.js'
},
options: {
mangle: false
}
},
SASS
sass: {
dist: {
files: {
'assets/css/tmp/theme.css': 'assets/css/src/theme.scss'
},
options: {
style: 'compact'
}
}
},
Autoprefixer
autoprefixer: {
dist: {
files: {
'assets/css/build/theme.css': 'assets/css/tmp/theme.css'
}
}
},
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']);