Skip to content

Kevin / CSS Optimizations Workshop

Go to a project
Commit 7159445a by Kevin Van Ransbeeck
Options

Minimize grunt tasks (minify, uglify, concat...)

1 parent 64b2f377
Inline Side-by-side
Showing 2 changed files with 7 additions and 81 deletions
Gruntfile.js
...@@ -3,19 +3,7 @@ module.exports = function(grunt) { ...@@ -3,19 +3,7 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
/** /**
* 1 :: Combine and uglify all JavaScript sources into 1 minified file. * 1 :: Process SASS (SCSS) files and compile their CSS version.
* Start with (external) libraries that are really needed (dependencies).
*/
uglify: {
build: {
files: {
'js/app.min.js': ['js/libs/*.js', 'js/app.js']
}
}
},
/**
* 2 :: Process SASS (SCSS) files and compile their CSS version.
*/ */
sass: { sass: {
options: { options: {
...@@ -34,61 +22,6 @@ module.exports = function(grunt) { ...@@ -34,61 +22,6 @@ module.exports = function(grunt) {
} }
}, },
/**
* 3 :: Combine different CSS files into 1 file.
* Start with (external) CSS (libs) that are really needed.
*/
concat_css: {
options: {
// Task-specific options go here.
},
all: {
src: ['css/**/*.css', '!css/style*css'],
dest: 'css/style-unprefixed.css'
},
},
/**
* 4 :: If there is CSS3 that needs browser-specific prefixes,
* this library will add these (create the different variants).
* On the contrary, if the original CSS contains prefixes that are no
* longer marked as needed, it will remove them (e.g. border-radius).
*/
autoprefixer: {
global: {
files : {
'css/style.css': 'css/style-unprefixed.css'
}
}
},
/**
* 5 :: Minify the prefixed CSS file to preserve bandwidth.
*/
cssmin: {
build: {
src: 'css/style.css',
dest: 'css/style.min.css'
}
},
/**
* 6 :: Combine all svg files and create one mapped svg sprite we can include.
*/
svgstore: {
options: {
prefix: "shape-",
cleanup: false,
svg: {
style: "display: none;"
}
},
default: {
files: {
'assets/svg-defs.svg': ['svg/*.svg']
}
}
},
/** /**
* X :: Watch files for changes and act on them (recompile etc...). * X :: Watch files for changes and act on them (recompile etc...).
...@@ -104,18 +37,8 @@ module.exports = function(grunt) { ...@@ -104,18 +37,8 @@ module.exports = function(grunt) {
css: { css: {
files: ['scss/**/*.scss', 'css/libs/*.css'], files: ['scss/**/*.scss', 'css/libs/*.css'],
tasks: ['sass', 'concat_css', 'autoprefixer', 'cssmin'] tasks: ['sass', ]
}, },
scripts: {
files: ['js/**/*.js', '!js/**/*.min.js'],
tasks: ['uglify']
},
svg: {
files: 'svg/**/*.svg',
tasks: ['svgstore']
}
} }
}); });
...@@ -123,6 +46,6 @@ module.exports = function(grunt) { ...@@ -123,6 +46,6 @@ module.exports = function(grunt) {
// Load necessairy grunt tasks based on npm modules. // Load necessairy grunt tasks based on npm modules.
require("load-grunt-tasks")(grunt); require("load-grunt-tasks")(grunt);
grunt.registerTask('build', ['uglify', 'sass', 'concat_css', 'autoprefixer', 'cssmin', 'svgstore']); grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']); grunt.registerTask('default', ['build','watch']);
} }
index.php
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo site.</title> <title>Demo site.</title>
<link rel="stylesheet" href="css/style.min.css" /> <link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/libs/owl.carousel.css" />
<link rel="stylesheet" href="css/libs/owl.theme.css" />
<link rel="stylesheet" href="css/libs/owl.transitions.css" />
</head> </head>
<body> <body>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!