Permalink
Browse files

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
  • Loading branch information...
1 parent 1e8870a commit 6a24a5a3a7d4a17fef12db289041841824ac288f Reed Dadoune committed Mar 15, 2014
Showing with 101 additions and 39 deletions.
  1. +20 −0 .csslintrc
  2. +2 −1 .gitignore
  3. +5 −28 app/views/includes/foot.html
  4. +3 −5 app/views/includes/head.html
  5. +19 −0 config/assets.json
  6. +18 −1 config/express.js
  7. +28 −1 gruntfile.js
  8. +3 −0 package.json
  9. +3 −3 public/css/common.css
View
@@ -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
+}
View
@@ -6,4 +6,5 @@
node_modules/
public/lib
test/coverage
-mean.iml
+mean.iml
+/public/build/
@@ -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 %}
@@ -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>
View
@@ -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"
+ ]
+ }
+}
View
@@ -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,
View
@@ -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']);
View
@@ -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",
@@ -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
-}
+}

0 comments on commit 6a24a5a

Please sign in to comment.