add grunt sass theme task
This commit is contained in:
		
							
								
								
									
										23
									
								
								Gruntfile.js
									
									
									
									
									
								
							
							
						
						
									
										23
									
								
								Gruntfile.js
									
									
									
									
									
								
							| @@ -42,6 +42,19 @@ module.exports = function(grunt) { | |||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
|  | 		sass: { | ||||||
|  | 			main: { | ||||||
|  | 				files: { | ||||||
|  | 					'css/theme/default.css': 'css/theme/source/default.scss', | ||||||
|  | 					'css/theme/beige.css': 'css/theme/source/beige.scss', | ||||||
|  | 					'css/theme/night.css': 'css/theme/source/night.scss', | ||||||
|  | 					'css/theme/serif.css': 'css/theme/source/serif.scss', | ||||||
|  | 					'css/theme/simple.css': 'css/theme/source/simple.scss', | ||||||
|  | 					'css/theme/sky.css': 'css/theme/source/sky.scss' | ||||||
|  | 				} | ||||||
|  | 			}, | ||||||
|  | 		}, | ||||||
|  |  | ||||||
| 		jshint: { | 		jshint: { | ||||||
| 			options: { | 			options: { | ||||||
| 				curly: false, | 				curly: false, | ||||||
| @@ -64,8 +77,14 @@ module.exports = function(grunt) { | |||||||
| 		}, | 		}, | ||||||
|  |  | ||||||
| 		watch: { | 		watch: { | ||||||
|  | 			main: { | ||||||
| 				files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], | 				files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], | ||||||
| 				tasks: 'default' | 				tasks: 'default' | ||||||
|  | 			}, | ||||||
|  | 			theme: { | ||||||
|  | 				files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ], | ||||||
|  | 				tasks: 'themes' | ||||||
|  | 			} | ||||||
| 		} | 		} | ||||||
|  |  | ||||||
| 	}); | 	}); | ||||||
| @@ -75,8 +94,12 @@ module.exports = function(grunt) { | |||||||
| 	grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); | 	grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); | ||||||
| 	grunt.loadNpmTasks( 'grunt-contrib-uglify' ); | 	grunt.loadNpmTasks( 'grunt-contrib-uglify' ); | ||||||
| 	grunt.loadNpmTasks( 'grunt-contrib-watch' ); | 	grunt.loadNpmTasks( 'grunt-contrib-watch' ); | ||||||
|  | 	grunt.loadNpmTasks( 'grunt-contrib-sass' ); | ||||||
|  |  | ||||||
| 	// Default task | 	// Default task | ||||||
| 	grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] ); | 	grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify' ] ); | ||||||
|  |  | ||||||
|  | 	// Theme task | ||||||
|  | 	grunt.registerTask( 'themes', [ 'sass' ] ); | ||||||
|  |  | ||||||
| }; | }; | ||||||
|   | |||||||
| @@ -1,25 +0,0 @@ | |||||||
| ## Dependencies |  | ||||||
|  |  | ||||||
| Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. |  | ||||||
|  |  | ||||||
| ``` |  | ||||||
| sass --watch css/theme/source/:css/theme --style expanded |  | ||||||
| ``` |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| ## Creating a Theme |  | ||||||
|  |  | ||||||
| To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). Each theme does four things in the following order: |  | ||||||
|  |  | ||||||
| 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**   |  | ||||||
| Shared utility functions. |  | ||||||
|  |  | ||||||
| 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**   |  | ||||||
| Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. |  | ||||||
|  |  | ||||||
| 3. **Override**   |  | ||||||
| This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. |  | ||||||
|  |  | ||||||
| 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**   |  | ||||||
| The template theme file which will generate final CSS output based on the currently defined variables. |  | ||||||
| @@ -29,6 +29,7 @@ | |||||||
|     "grunt-contrib-cssmin": "~0.4.1", |     "grunt-contrib-cssmin": "~0.4.1", | ||||||
|     "grunt-contrib-uglify": "~0.1.1", |     "grunt-contrib-uglify": "~0.1.1", | ||||||
|     "grunt-contrib-watch": "~0.2.0", |     "grunt-contrib-watch": "~0.2.0", | ||||||
|  |     "grunt-contrib-sass": "~0.2.2", | ||||||
|     "grunt": "~0.4.0" |     "grunt": "~0.4.0" | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user