Simple modifications to allow for production and development asset ma…

…nagement. - Added csslint with bootstrap's .csslintrc file (fixed css lint warnings in common.css) - Added cssmin and uglify to compress assets during production builds - Added assetmanager to switch assets files in the template respectively for production and development builds
abhisekb · Mar 15, 2014 · 6a24a5a · 6a24a5a
1 parent 1e8870a
commit 6a24a5a
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 39 deletions.
diff --git a/.csslintrc b/.csslintrc
@@ -0,0 +1,20 @@
+{
+	"adjoining-classes": false,
+	"box-model": false,
+	"box-sizing": false,
+	"compatible-vendor-prefixes": false,
+	"floats": false,
+	"font-sizes": false,
+	"gradients": false,
+	"important": false,
+	"known-properties": false,
+	"outline-none": false,
+	"overqualified-elements": false,
+	"qualified-headings": false,
+	"regex-selectors": false,
+	"shorthand": false,
+	"text-indent": false,
+	"unique-headings": false,
+	"universal-selector": false,
+	"unqualified-attributes": false
+}
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@
 node_modules/
 public/lib
 test/coverage
-mean.iml
+mean.iml
+/public/build/
diff --git a/app/views/includes/foot.html b/app/views/includes/foot.html
@@ -1,31 +1,8 @@
-<!-- Angular JS -->
-<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
-<script type="text/javascript" src="/lib/angular-cookies/angular-cookies.min.js"></script>
-<script type="text/javascript" src="/lib/angular-resource/angular-resource.min.js"></script>
-<script type="text/javascript" src="/lib/angular-ui-router/release/angular-ui-router.js"></script>
-
-<!-- Angular UI -->
-<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script>
-<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
-
-<!-- Application Init -->
-<script type="text/javascript" src="/js/app.js"></script>
-<script type="text/javascript" src="/js/config.js"></script>
-<script type="text/javascript" src="/js/directives.js"></script>
-<script type="text/javascript" src="/js/filters.js"></script>
-
-<!-- Application Services -->
-<script type="text/javascript" src="/js/services/global.js"></script>
-<script type="text/javascript" src="/js/services/articles.js"></script>
-
-<!-- Application Controllers -->
-<script type="text/javascript" src="/js/controllers/articles.js"></script>
-<script type="text/javascript" src="/js/controllers/index.js"></script>
-<script type="text/javascript" src="/js/controllers/header.js"></script>
-<script type="text/javascript" src="/js/init.js"></script>
-
+{% for file in assets.js %}
+	<script type="text/javascript" src="{{file}}"></script>
+{% endfor %}
 
 {% if (process.env.NODE_ENV == 'development') %}
-    <!-- Livereload script rendered -->
-    <script type="text/javascript" src="{{'http://' + req.host + ':35729/livereload.js'}}"></script>
+	<!-- Livereload script rendered -->
+	<script type="text/javascript" src="{{'http://' + req.host + ':35729/livereload.js'}}"></script>
 {% endif %}
diff --git a/app/views/includes/head.html b/app/views/includes/head.html
@@ -19,11 +19,9 @@
     <meta property="og:site_name" content="MEAN - A Modern Stack">
     <meta property="fb:admins" content="APP_ADMIN">
 
-    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css">
-    <!-- <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-responsive.css"> -->
-    <link rel="stylesheet" href="/css/common.css">
-
-    <link rel="stylesheet" href="/css/views/articles.css">
+    {% for file in assets.css %}
+        <link rel="stylesheet" href="{{file}}">
+    {% endfor %}
 
 <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

diff --git a/config/assets.json b/config/assets.json
@@ -0,0 +1,19 @@
+{
+	"css": {
+		"public/build/css/dist.min.css": [
+			"public/lib/bootstrap/dist/css/bootstrap.css",
+			"public/css/**/*.css"
+		]
+	},
+	"js": {
+		"public/build/js/dist.min.js": [
+			"public/lib/angular/angular.js",
+			"public/lib/angular-cookies/angular-cookies.js",
+			"public/lib/angular-resource/angular-resource.js",
+			"public/lib/angular-ui-router/release/angular-ui-router.js",
+			"public/lib/angular-bootstrap/ui-bootstrap.js",
+			"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
+			"public/js/**/*.js"
+		]
+	}
+}
diff --git a/config/express.js b/config/express.js
@@ -8,6 +8,7 @@ var express = require('express'),
     mongoStore = require('connect-mongo')(express),
     flash = require('connect-flash'),
     helpers = require('view-helpers'),
+    assetmanager = require('assetmanager'),
     config = require('./config');
 
 module.exports = function(app, passport, db) {
@@ -17,7 +18,7 @@ module.exports = function(app, passport, db) {
     app.locals.pretty = true;
 		// cache=memory or swig dies in NODE_ENV=production
 		app.locals.cache = 'memory';
-		
+
     // Should be placed before express.static
     // To ensure that all assets and data are compressed (utilize bandwidth)
     app.use(express.compress({
@@ -55,6 +56,22 @@ module.exports = function(app, passport, db) {
         app.use(express.json());
         app.use(express.methodOverride());
 
+        // Import your asset file
+        var assets = require('./assets.json');
+        assetmanager.init({
+            js: assets.js,
+            css: assets.css,
+            debug: (process.env.NODE_ENV !== 'production'),
+            webroot: 'public'
+        });
+        // Add assets to local variables
+        app.use(function (req, res, next) {
+            res.locals({
+                assets: assetmanager.assets
+            });
+            next();
+        });
+
         // Express/Mongo session storage
         app.use(express.session({
             secret: config.sessionSecret,

diff --git a/gruntfile.js b/gruntfile.js
@@ -4,6 +4,7 @@ module.exports = function(grunt) {
     // Project Configuration
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
+        assets: grunt.file.readJSON('config/assets.json'),
         watch: {
             js: {
                 files: ['gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js'],
@@ -20,6 +21,7 @@ module.exports = function(grunt) {
             },
             css: {
                 files: ['public/css/**'],
+                tasks: ['csslint'],
                 options: {
                     livereload: true
                 }
@@ -33,6 +35,24 @@ module.exports = function(grunt) {
                 }
             }
         },
+        uglify: {
+            production: {
+                files: '<%= assets.js %>'
+            }
+        },
+        csslint: {
+            options: {
+                csslintrc: '.csslintrc'
+            },
+            all: {
+                src: ['public/css/**/*.css']
+            }
+        },
+        cssmin: {
+            combine: {
+                files: '<%= assets.css %>'
+            }
+        },
         nodemon: {
             dev: {
                 script: 'server.js',
@@ -75,6 +95,9 @@ module.exports = function(grunt) {
     });
 
     //Load NPM tasks
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-csslint');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-mocha-test');
@@ -87,7 +110,11 @@ module.exports = function(grunt) {
     grunt.option('force', true);
 
     //Default task(s).
-    grunt.registerTask('default', ['jshint', 'concurrent']);
+    if (process.env.NODE_ENV === 'production') {
+        grunt.registerTask('default', ['jshint', 'csslint', 'cssmin', 'uglify', 'concurrent']);
+    } else {
+        grunt.registerTask('default', ['jshint', 'csslint', 'concurrent']);
+    }
 
     //Test task.
     grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "postinstall": "node node_modules/bower/bin/bower install"
   },
   "dependencies": {
+    "assetmanager": "^0.1.0",
     "express": "~3.4.7",
     "jade": "~1.0.2",
     "consolidate": "~0.10.0",
@@ -60,6 +61,8 @@
     "swig": "~1.3.2"
   },
   "devDependencies": {
+    "grunt-contrib-cssmin": "^0.9.0",
+    "grunt-contrib-uglify": "^0.4.0",
     "supertest": "0.8.2",
     "should": "2.1.1",
     "grunt-contrib-watch": "latest",

diff --git a/public/css/common.css b/public/css/common.css
@@ -10,8 +10,8 @@
 
 footer {
     position:fixed;
-    left:0px;
-    bottom:0px;
+    left:0;
+    bottom:0;
     height:30px;
     width:100%;
     background:#ddd;
@@ -22,4 +22,4 @@ footer {
 
 footer p {
     padding:5px 0 12px 10px
-}
+}