Permalink
Browse files

Updated Grunt file to work with Sass source files. Now requires Ruby …

…as well as the Sass gem.
  • Loading branch information...
1 parent f03d169 commit 2ab401a6155a9d483972037203e1a26f220cff9e @markleusink markleusink committed Feb 10, 2015
Showing with 47 additions and 73 deletions.
  1. +2 −1 .gitignore
  2. +26 −67 Gruntfile.js
  3. +11 −0 README.md
  4. +2 −3 package.json
  5. +1 −1 src/css/bootcards-android.scss
  6. +2 −0 src/css/bootcards-desktop.scss
  7. +1 −1 src/css/bootcards-ios.scss
  8. +2 −0 src/css/bootcards-mobile-shared.scss
View
@@ -1,3 +1,4 @@
node_modules/
bower_components/
-npm-debug.log
+npm-debug.log
+.sass-cache/
View
@@ -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'
+ ]);
};
View
@@ -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 <a href="http://getbootstrap.com" target="_blank">Twitter Bootstrap</a> and <a href="http://goratchet.com/" target="_blank">Ratchet</a> 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.
View
@@ -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": {
@@ -1,4 +1,4 @@
-@import "bootcards-mobile-shared.css";
+@import "bootcards-mobile-shared.scss";
body {
background-color: #eee;
@@ -1,3 +1,5 @@
+@import "bootcards.scss";
+
body {
padding-top: 80px;
background: #f5f5f5;
@@ -1,4 +1,4 @@
-@import "bootcards-mobile-shared.css";
+@import "bootcards-mobile-shared.scss";
$navbar-height: 44px;
$navbar-height-phone-landscape: 32px;
@@ -1,3 +1,5 @@
+@import "bootcards.scss";
+
html,
body {
height: 100%;

0 comments on commit 2ab401a

Please sign in to comment.