From 9046bd504127388cc53fd81ce23920dfc960d72f Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Fri, 6 Sep 2013 21:39:18 +0200 Subject: [PATCH] css --- Gruntfile.js | 32 +++++++++++++-- package.json | 2 + public/css/index.styl | 5 ++- public/css/static.styl | 5 +++ src/server.js | 1 - views/index.jade | 85 ++++++++++++++++++++-------------------- views/static/layout.jade | 8 ++-- 7 files changed, 85 insertions(+), 53 deletions(-) create mode 100644 public/css/static.styl diff --git a/Gruntfile.js b/Gruntfile.js index 3aef062363..11e435f28e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -78,7 +78,30 @@ module.exports = function(grunt) { } }, - hashres: { + stylus: { + build: { + options: { + compress: false, // AFTER + 'include css': true, + paths: ['public'] + }, + files: { + 'public/build/app.css': ['public/css/index.styl'], + 'public/build/static.css': ['public/css/static.styl'] + } + } + }, + + cssmin: { + build: { + files: { + 'public/build/app.css': ['public/build/app.css'], + 'public/build/static.css': ['public/build/static.css'] + } + } + } + + /*hashres: { options: { fileNameFormat: '${name}-${hash}.${ext}', }, @@ -89,16 +112,19 @@ module.exports = function(grunt) { ], dest: 'views/i-do-not-exist.jade' // Non existing file! } - } + }*/ }); // Register tasks. - grunt.registerTask('build', ['clean:build', 'uglify', 'hashres']); + grunt.registerTask('build', ['clean:build', 'uglify', 'stylus', 'cssmin']); + grunt.registerTask('run', ['clean:build', 'stylus', 'cssmin']); // Load tasks grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-hashres'); grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-stylus'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); }; diff --git a/package.json b/package.json index c5c6ba6178..5cb92d725f 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,9 @@ "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.2.4", "grunt-hashres": "~0.3.2", + "grunt-contrib-stylus": "~0.8.0", "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-cssmin": "~0.6.1", "bower": "~1.2.4", "nib": "~1.0.1", "jade": "~0.35.0", diff --git a/public/css/index.styl b/public/css/index.styl index 0ac2acf0c6..df1a3674f2 100644 --- a/public/css/index.styl +++ b/public/css/index.styl @@ -1,7 +1,10 @@ @import "nib/vendor" // Vendor Includes - include first so we can override -@import "../../../public/bower_components/bootstrap-datepicker/css/datepicker.css" +// Import only styles that do not have urls to images! Include them directly in the page! +@import "../bower_components/bootstrap-datepicker/css/datepicker.css" +@import "../bower_components/angular-ui/build/angular-ui.min.css" +@import "../bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css" // Custom includes @import "./tasks.styl" diff --git a/public/css/static.styl b/public/css/static.styl new file mode 100644 index 0000000000..4de9de0283 --- /dev/null +++ b/public/css/static.styl @@ -0,0 +1,5 @@ +// Vendor Includes - include first so we can override +// Import only styles that do not have urls to images! Include them directly in the page! + +@import "./static-pages.css" +@import "./footer.css" \ No newline at end of file diff --git a/src/server.js b/src/server.js index b79092941b..7db81884d0 100644 --- a/src/server.js +++ b/src/server.js @@ -75,7 +75,6 @@ app.use(express.favicon()); app.use(middleware.cors); app.use(middleware.forceSSL); app.use(express.bodyParser()); -app.use(require('connect-assets')({src: 'public'})); app.use(express.methodOverride()); //app.use(express.cookieParser(nconf.get('SESSION_SECRET'))); app.use(express.cookieParser()); diff --git a/views/index.jade b/views/index.jade index a8938d88e8..792f1e7564 100644 --- a/views/index.jade +++ b/views/index.jade @@ -13,9 +13,8 @@ html // CSS link(rel='stylesheet', href='/bower_components/bootstrap/docs/assets/css/bootstrap.css') - link(rel='stylesheet', href='/bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css') - link(rel='stylesheet', href='/bower_components/angular-ui/build/angular-ui.min.css') - != css('index') + + link(rel='stylesheet', href='/build/app.css') // HabitRPG Shared link(rel='stylesheet', href='/bower_components/habitrpg-shared/dist/spritesheets.css') @@ -24,53 +23,53 @@ html script(type='text/javascript', src='build/app.js') - }else{ // Remember to update the file list in Gruntfile.js! - script(type='text/javascript', src='bower_components/jquery/jquery.min.js') - script(type='text/javascript', src='bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js') - script(type='text/javascript', src='bower_components/angular/angular.min.js') - script(type='text/javascript', src='bower_components/angular-sanitize/angular-sanitize.min.js') - script(type='text/javascript', src='bower_components/angular-route/angular-route.min.js') - script(type='text/javascript', src='bower_components/angular-resource/angular-resource.min.js') - script(type='text/javascript', src='bower_components/angular-ui/build/angular-ui.min.js') - script(type='text/javascript', src='bower_components/angular-ui-utils/modules/keypress/keypress.js') + script(type='text/javascript', src='/bower_components/jquery/jquery.min.js') + script(type='text/javascript', src='/bower_components/bootstrap-growl/jquery.bootstrap-growl.min.js') + script(type='text/javascript', src='/bower_components/angular/angular.min.js') + script(type='text/javascript', src='/bower_components/angular-sanitize/angular-sanitize.min.js') + script(type='text/javascript', src='/bower_components/angular-route/angular-route.min.js') + script(type='text/javascript', src='/bower_components/angular-resource/angular-resource.min.js') + script(type='text/javascript', src='/bower_components/angular-ui/build/angular-ui.min.js') + script(type='text/javascript', src='/bower_components/angular-ui-utils/modules/keypress/keypress.js') // we'll remove this once angular-bootstrap is fixed - script(type='text/javascript', src='bower_components/bootstrap/docs/assets/js/bootstrap.min.js') - script(type='text/javascript', src='bower_components/angular-bootstrap/ui-bootstrap.min.js') - script(type='text/javascript', src='bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js') + script(type='text/javascript', src='/bower_components/bootstrap/docs/assets/js/bootstrap.min.js') + script(type='text/javascript', src='/bower_components/angular-bootstrap/ui-bootstrap.min.js') + script(type='text/javascript', src='/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js') // Sortable - script(type='text/javascript', src='bower_components/jquery-ui/ui/minified/jquery.ui.core.min.js') - script(type='text/javascript', src='bower_components/jquery-ui/ui/minified/jquery.ui.widget.min.js') - script(type='text/javascript', src='bower_components/jquery-ui/ui/minified/jquery.ui.mouse.min.js') - script(type='text/javascript', src='bower_components/jquery-ui/ui/minified/jquery.ui.sortable.min.js') + script(type='text/javascript', src='/bower_components/jquery-ui/ui/minified/jquery.ui.core.min.js') + script(type='text/javascript', src='/bower_components/jquery-ui/ui/minified/jquery.ui.widget.min.js') + script(type='text/javascript', src='/bower_components/jquery-ui/ui/minified/jquery.ui.mouse.min.js') + script(type='text/javascript', src='/bower_components/jquery-ui/ui/minified/jquery.ui.sortable.min.js') // habitrpg-shared - script(type='text/javascript', src='bower_components/habitrpg-shared/dist/habitrpg-shared.js') + script(type='text/javascript', src='/bower_components/habitrpg-shared/dist/habitrpg-shared.js') // app - script(type='text/javascript', src='js/app.js') - script(type='text/javascript', src='js/services/authServices.js') - script(type='text/javascript', src='js/services/notificationServices.js') - script(type='text/javascript', src='js/services/sharedServices.js') - script(type='text/javascript', src='js/services/userServices.js') - script(type='text/javascript', src='js/services/groupServices.js') + script(type='text/javascript', src='/js/app.js') + script(type='text/javascript', src='/js/services/authServices.js') + script(type='text/javascript', src='/js/services/notificationServices.js') + script(type='text/javascript', src='/js/services/sharedServices.js') + script(type='text/javascript', src='/js/services/userServices.js') + script(type='text/javascript', src='/js/services/groupServices.js') - script(type='text/javascript', src='js/filters/filters.js') + script(type='text/javascript', src='/js/filters/filters.js') - script(type='text/javascript', src='js/directives/directives.js') + script(type='text/javascript', src='/js/directives/directives.js') - script(type='text/javascript', src='js/controllers/authCtrl.js') - script(type='text/javascript', src='js/controllers/characterCtrl.js') - script(type='text/javascript', src='js/controllers/menuCtrl.js') - script(type='text/javascript', src='js/controllers/notificationCtrl.js') - script(type='text/javascript', src='js/controllers/rootCtrl.js') - script(type='text/javascript', src='js/controllers/settingsCtrl.js') - script(type='text/javascript', src='js/controllers/statsCtrl.js') - script(type='text/javascript', src='js/controllers/tasksCtrl.js') - script(type='text/javascript', src='js/controllers/taskDetailsCtrl.js') - script(type='text/javascript', src='js/controllers/filtersCtrl.js') - script(type='text/javascript', src='js/controllers/userAvatarCtrl.js') - script(type='text/javascript', src='js/controllers/groupsCtrl.js') - script(type='text/javascript', src='js/controllers/petsCtrl.js') - script(type='text/javascript', src='js/controllers/inventoryCtrl.js') - script(type='text/javascript', src='js/controllers/marketCtrl.js') - script(type='text/javascript', src='js/controllers/footerCtrl.js') + script(type='text/javascript', src='/js/controllers/authCtrl.js') + script(type='text/javascript', src='/js/controllers/characterCtrl.js') + script(type='text/javascript', src='/js/controllers/menuCtrl.js') + script(type='text/javascript', src='/js/controllers/notificationCtrl.js') + script(type='text/javascript', src='/js/controllers/rootCtrl.js') + script(type='text/javascript', src='/js/controllers/settingsCtrl.js') + script(type='text/javascript', src='/js/controllers/statsCtrl.js') + script(type='text/javascript', src='/js/controllers/tasksCtrl.js') + script(type='text/javascript', src='/js/controllers/taskDetailsCtrl.js') + script(type='text/javascript', src='/js/controllers/filtersCtrl.js') + script(type='text/javascript', src='/js/controllers/userAvatarCtrl.js') + script(type='text/javascript', src='/js/controllers/groupsCtrl.js') + script(type='text/javascript', src='/js/controllers/petsCtrl.js') + script(type='text/javascript', src='/js/controllers/inventoryCtrl.js') + script(type='text/javascript', src='/js/controllers/marketCtrl.js') + script(type='text/javascript', src='/js/controllers/footerCtrl.js') -} //webfonts diff --git a/views/static/layout.jade b/views/static/layout.jade index 3abbf2eb35..d001bb5f4a 100644 --- a/views/static/layout.jade +++ b/views/static/layout.jade @@ -12,13 +12,11 @@ html // CSS link(rel='stylesheet', href='/bower_components/bootstrap/docs/assets/css/bootstrap.css') + // Keep this out of build because the one after has some images and would like not to override it link(rel='stylesheet', href='/bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css') link(href='/bower_components/bootstrap/docs/assets/css/docs.css', rel='stylesheet') - link(href='/css/static-pages.css', rel='stylesheet') - link(href='/css/footer.css', rel='stylesheet') - - // FIXME we gotta get rid of all these requirements in userServices. we don't need habitrpg-shared, lodash, moment, etc here - // and habitrpg-shared alone is ~700kb + + link(rel='stylesheet', href='/build/static.css') // JS - if(layoutEnv.NODE_ENV == 'production'){