From 2ab401a6155a9d483972037203e1a26f220cff9e Mon Sep 17 00:00:00 2001 From: Mark Leusink Date: Tue, 10 Feb 2015 16:58:26 +0100 Subject: [PATCH] Updated Grunt file to work with Sass source files. Now requires Ruby as well as the Sass gem. --- .gitignore | 3 +- Gruntfile.js | 93 ++++++++-------------------- README.md | 11 ++++ package.json | 5 +- src/css/bootcards-android.scss | 2 +- src/css/bootcards-desktop.scss | 2 + src/css/bootcards-ios.scss | 2 +- src/css/bootcards-mobile-shared.scss | 2 + 8 files changed, 47 insertions(+), 73 deletions(-) diff --git a/.gitignore b/.gitignore index e6eb5c8..e9d6b21 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ bower_components/ -npm-debug.log \ No newline at end of file +npm-debug.log +.sass-cache/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 9cb76bb..eeee10f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,16 +1,23 @@ module.exports = function(grunt) { - // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd h:MM") %> */\n', - clean: ["dist"], + //clean the output folder and unused css files + clean: { + output : { + src: ["dist"] + }, + unused : { + src : ['dist/css/bootcards.css*', 'dist/css/bootcards-mobile*'] + } + }, + //move all js and font source files to the dist folder copy: { main: { files: [ - // includes files within path {expand: true, src: ['src/js/*'], dest: 'dist/js/', filter: 'isFile', flatten: true}, {expand: true, src: ['src/fonts/*'], dest: 'dist/fonts/', filter: 'isFile', flatten: true} ] @@ -27,62 +34,15 @@ module.exports = function(grunt) { } }, - concat: { - cssdesktoplite: { - options: { banner: '<%= banner %>' }, - src: [ - 'src/css/bootcards.css','src/css/bootcards-desktop.css' - ], - dest: 'dist/css/bootcards-desktop-lite.css' - }, - cssioslite: { - options: { banner: '<%= banner %>' }, - src: [ - 'src/css/bootcards.css','src/css/bootcards-mobile-shared.css','src/css/bootcards-ios.css' - ], - dest: 'dist/css/bootcards-ios-lite.css' - }, - cssandroidlite: { - options: { banner: '<%= banner %>' }, - src: [ - 'src/css/bootcards.css','src/css/bootcards-mobile-shared.css','src/css/bootcards-android.css' - ], - dest: 'dist/css/bootcards-android-lite.css' - }, - cssdesktop: { - options: { banner: '<%= banner %>' }, - src: [ - 'bower_components/bootstrap/dist/css/bootstrap.min.css','dist/css/bootcards-desktop-lite.min.css' - ], - dest: 'dist/css/bootcards-desktop.min.css' - }, - cssios: { - options: { banner: '<%= banner %>' }, - src: [ - 'bower_components/bootstrap/dist/css/bootstrap.min.css','dist/css/bootcards-ios-lite.min.css' - ], - dest: 'dist/css/bootcards-ios.min.css' - }, - cssandroid: { - options: { banner: '<%= banner %>' }, - src: [ - 'bower_components/bootstrap/dist/css/bootstrap.min.css','dist/css/bootcards-android-lite.min.css' - ], - dest: 'dist/css/bootcards-android.min.css' - } - }, - - replace : { - - imports : { - src: [ - 'dist/css/bootcards-android.css', 'dist/css/bootcards-ios.css' - ], - overwrite: true, - replacements : [{ - from : /\@import\s\".*\"\;/, - to : "" - }] + sass: { + dist: { + files: [{ + expand: true, + src: ['src/css/*.scss'], + dest: 'dist/css', + ext: '.css', + flatten: true + }] } }, @@ -101,7 +61,7 @@ module.exports = function(grunt) { watch : { scripts: { - files: ['**/*.js', '**/*.html', '**/*.css'], + files: ['**/*.js', '**/*.scss'], tasks: ['default'], options: { spawn: false, @@ -113,21 +73,20 @@ module.exports = function(grunt) { // Load the plugin that provides the "uglify"/ contat task. grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-text-replace'); + grunt.loadNpmTasks('grunt-contrib-sass'); // Default task(s). grunt.registerTask('default', [ - 'clean', + 'clean:output', 'copy', 'uglify', - 'concat:cssdesktoplite','concat:cssioslite','concat:cssandroidlite', - 'replace:imports', - 'cssmin:minify', - 'concat:cssdesktop','concat:cssios','concat:cssandroid',]); + 'sass', + 'clean:unused', + 'cssmin:minify' + ]); }; \ No newline at end of file diff --git a/README.md b/README.md index 1759b22..88ecd5b 100644 --- a/README.md +++ b/README.md @@ -16,3 +16,14 @@ Want to help or want to know more? Drop us a note at bootcards@gmail.com. Look f **License** Bootcards is released under an MIT license. It contains code from the Twitter Bootstrap and Ratchet projects (both also MIT licensed). + +**Building** + +To build the Bootcards source files using Grunt you'll need: + +- Node & NPM +- Grunt: npm install -g grunt-cli +- Ruby: check if it's install by running ruby -v in your terminal. (should be Ok if you're on Linux or Mac OS X, otherwise see http://www.ruby-lang.org/en/downloads/) +- Sass: install using Ruby by running: gem install sass + +Bootcards uses Grunt to build the source files. You'lou will need Sass too to compile CSS files from the Sass source files. diff --git a/package.json b/package.json index 1972573..c6a6de0 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,11 @@ "devDependencies": { "grunt": "~0.4.4", "grunt-contrib-clean": "^0.5.0", - "grunt-contrib-concat": "^0.5.0", "grunt-contrib-copy": "^0.5.0", "grunt-contrib-cssmin": "^0.9.0", + "grunt-contrib-sass": "^0.9.2", "grunt-contrib-uglify": "^0.7.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-text-replace": "^0.4.0" + "grunt-contrib-watch": "^0.6.1" }, "license": "MIT", "bugs": { diff --git a/src/css/bootcards-android.scss b/src/css/bootcards-android.scss index b5dda60..84fea70 100644 --- a/src/css/bootcards-android.scss +++ b/src/css/bootcards-android.scss @@ -1,4 +1,4 @@ -@import "bootcards-mobile-shared.css"; +@import "bootcards-mobile-shared.scss"; body { background-color: #eee; diff --git a/src/css/bootcards-desktop.scss b/src/css/bootcards-desktop.scss index d70d80a..12e3da8 100644 --- a/src/css/bootcards-desktop.scss +++ b/src/css/bootcards-desktop.scss @@ -1,3 +1,5 @@ +@import "bootcards.scss"; + body { padding-top: 80px; background: #f5f5f5; diff --git a/src/css/bootcards-ios.scss b/src/css/bootcards-ios.scss index 57127fc..090ddd1 100644 --- a/src/css/bootcards-ios.scss +++ b/src/css/bootcards-ios.scss @@ -1,4 +1,4 @@ -@import "bootcards-mobile-shared.css"; +@import "bootcards-mobile-shared.scss"; $navbar-height: 44px; $navbar-height-phone-landscape: 32px; diff --git a/src/css/bootcards-mobile-shared.scss b/src/css/bootcards-mobile-shared.scss index 6f11ab8..087de96 100644 --- a/src/css/bootcards-mobile-shared.scss +++ b/src/css/bootcards-mobile-shared.scss @@ -1,3 +1,5 @@ +@import "bootcards.scss"; + html, body { height: 100%;