use Grunt to compile assets

hengkiardo · Apr 25, 2014 · 0f1023c · 0f1023c
1 parent bbd4a88
commit 0f1023c
Show file tree

Hide file tree

Showing 99 changed files with 13,203 additions and 41 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,11 @@ build/Release
 # Dependency directory
 # Deployed apps should consider commenting this line out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+.DS_Store
 node_modules
+public/css/*
+public/js/bootstrap.js
+public/js/apps.js
 rsync_exclude.txt
 deploy
+public/assets/
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
@@ -0,0 +1,199 @@
+module.exports = (grunt) ->
+
+  config = require(__dirname + "/app/config/config")
+
+  ###
+  Dynamically load npm tasks
+  ###
+  require("load-grunt-tasks") grunt
+
+  grunt.initConfig
+
+    pkg: grunt.file.readJSON("package.json")
+
+    # Watching changes files *.less, *.js,
+    watch:
+      all:
+        files: [
+          "Gruntfile.coffee"
+          "public/js/**/*.js"
+          "public/less/*.less"
+          "public/less/**/*.less"
+        ]
+        tasks: [
+          "clean:dev"
+          "concat"
+          "less:compileCore"
+          "less:compileCustom"
+          "watch"
+        ]
+        options:
+          nospawn: true
+
+    # Concat js files
+    concat:
+      options:
+        separator: ";" #separates scripts
+
+      bootstrap:
+        src: [
+          "public/js/bootstrap/transition.js"
+          "public/js/bootstrap/alert.js"
+          "public/js/bootstrap/button.js"
+          "public/js/bootstrap/carousel.js"
+          "public/js/bootstrap/collapse.js"
+          "public/js/bootstrap/dropdown.js"
+          "public/js/bootstrap/modal.js"
+          "public/js/bootstrap/tooltip.js"
+          "public/js/bootstrap/popover.js"
+          "public/js/bootstrap/scrollspy.js"
+          "public/js/bootstrap/tab.js"
+          "public/js/bootstrap/affix.js"
+        ]
+        dest: "public/js/bootstrap.js"
+
+      apps:
+        src: [
+          "public/js/apps/home.js"
+        ]
+        dest: "public/js/apps.js"
+
+    jshint:
+      options:
+        jshintrc: "js/bootstrap/.jshintrc"
+
+      src:
+        src: "js/bootstrap/*.js"
+
+
+    #our uglify options
+    uglify:
+      options:
+        report: "min"
+        compress:
+          dead_code: true
+      # wrap: true,
+      # sourceMap: true
+      main_script:
+        src: [
+          "public/js/apps.js"
+          "<%= concat.bootstrap.dest %>"
+        ]
+        dest: "public/assets/js/apps.min.js"
+
+    less:
+      compileCore:
+        options:
+          strictMath: true
+          sourceMap: true
+          outputSourceFiles: true
+          sourceMapURL: "bootstrap.css.map"
+          sourceMapFilename: "public/css/bootstrap.css.map"
+
+        files:
+          "public/css/bootstrap.css": "public/less/bootstrap/bootstrap.less"
+
+      compileCustom:
+        options:
+          strictMath: true
+          sourceMap: true
+          outputSourceFiles: true
+          sourceMapURL: "apps.css.map"
+          sourceMapFilename: "public/css/apps.css.map"
+
+        files:
+          "public/css/apps.css": "public/less/apps.less"
+
+    cssmin:
+      combine:
+        files:
+          "public/assets/css/apps.min.css": [
+            "public/css/bootstrap.css"
+            "public/css/apps.css"
+          ]
+
+    copy:
+      main:
+        files: [
+          {
+            expand: true
+            cwd: "public/img/"
+            src: ["**"]
+            dest: "public/assets/img"
+          }
+          {
+            expand: true
+            cwd: "public/fonts/"
+            src: ["**"]
+            dest: "public/assets/fonts"
+          }
+        ]
+
+    nodemon:
+      dev:
+        script: "server.js"
+        options:
+          ignore: [
+            "README.md"
+            "node_modules/**"
+            ".DS_Store"
+            "public"
+          ]
+          ext: "js"
+          watch: [
+            "app"
+            "server.js"
+            "Gruntfile.js"
+            "package.json"
+          ]
+          delayTime: 1
+          env:
+            PORT: config.server.port
+          cwd: __dirname
+
+    concurrent:
+      tasks: [
+        "watch"
+        "nodemon"
+      ]
+      options:
+        logConcurrentOutput: true
+
+    clean:
+      dev: [
+        "public/js/apps.js"
+        "public/js/bootstrap.js"
+      ]
+
+      build: [
+        "public/assets/*"
+      ]
+
+  grunt.registerTask "less-compile", [
+    "clean:dev"
+    "less:compileCore"
+    "less:compileCustom"
+  ]
+
+  grunt.registerTask "dev", [
+    "clean:dev"
+    "less:compileCore"
+    "less:compileCustom"
+    "concat"
+  ]
+
+  grunt.registerTask "default", [
+    "dev"
+    "concurrent"
+  ]
+
+  grunt.registerTask "production", [
+    "clean:build"
+    "less:compileCore"
+    "less:compileCustom"
+    "cssmin"
+    "copy"
+    "concat"
+    "uglify"
+  ]
+  return
diff --git a/README.md b/README.md
@@ -4,7 +4,6 @@ ExpressJS 4 Starter
 A simple demo app in Node.js using expressJS 4, Mongoose, Passport.js and Jade for Beginners
 
 [![Build Status](https://travis-ci.org/aredo/express4-bootstrap-starter.svg?branch=master)](https://travis-ci.org/aredo/express4-bootstrap-starter)
-
 [![Dependencies Status](https://david-dm.org/aredo/express4-bootstrap-starter.png)](https://david-dm.org/aredo/express4-bootstrap-starter)
 
 ## Install
@@ -15,21 +14,23 @@ A simple demo app in Node.js using expressJS 4, Mongoose, Passport.js and Jade f
 
 ### Tool Prerequisites
 
-- NPM - Node.js package manager, should be installed when you install node.js. NPM (Node Package Manager) will look at the [package.json](https://github.com/jpotts18/mean-stack-relational/blob/master/package.json) file in the root of the project and download all of the necessary dependencies and put them in a folder called ```node_modules```
--  [imagemagick](http://www.imagemagick.org/script/index.php)
+- [NPM](https://npmjs.org) - Node.js package manager, should be installed when you install node.js. NPM (Node Package Manager) will look at the [package.json](https://github.com/jpotts18/mean-stack-relational/blob/master/package.json) file in the root of the project and download all of the necessary dependencies and put them in a folder called ```node_modules```
+- [Genghis](http://genghisapp.com/) - The single-file MongoDB admin app
+
+### Javascript Tools Used
+- [Grunt](http://gruntjs.com/) - In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a Grunt can do most of that mundane work for you—and your team—with basically zero effort.
+
 
 **NOTE:**
 After installing  Node.js and MongoDB server has running, then its time to running your server.
 
 ```
-  $ git clone git@bitbucket.org:gushcloud_id/gushcentral.git
+  $ git clone git@github.com:aredo/express4-bootstrap-starter.git
   $ npm install
-  $ cp config/config.example.js config/config.js
-  $ cp config/imager.example.js config/imager.js
   $ grunt
 ```
 
-Then visit [http://localhost:8765/](http://localhost:8765/)
+Then visit [http://localhost:3001/](http://localhost:3001/)
 
 
 ### NPM Modules Used
@@ -39,9 +40,8 @@ Then visit [http://localhost:8765/](http://localhost:8765/)
 - [LESS.JS](http://lesscss.org/) - Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
 
 
-
-
 ### Directory structure
+
 ```
 -app/
   |__config/
@@ -59,9 +59,10 @@ Then visit [http://localhost:8765/](http://localhost:8765/)
   |__fonts
   |__img
   favicon.ico
+-Grunfile.coffee
 ```
 
 
 # Troubleshooting
 
-During install some of you may encounter some issues feel free to contact me (@hengkiardo), via the repository issue tracker or the links provided below. I am also available on twitter [@hengkiardo](http://twitter.com/hengkiardo).
+During install some of you may encounter some issues feel free to contact me [@hengkiardo](http://twitter.com/hengkiardo) or submit [issue](https://github.com/aredo/express4-bootstrap-starter/issues). via the repository issue tracker or the links provided below. I am also available on twitter [@hengkiardo](http://twitter.com/hengkiardo).
diff --git a/app/config/config.js b/app/config/config.js
@@ -40,7 +40,7 @@ var config = {
   //
   production: {
     server: {
-      port: 3001,
+      port: 3030,
       hostname: process.env.HOSTNAME || '127.0.0.1',
     },
     database: {

diff --git a/app/config/express.js b/app/config/express.js
@@ -65,7 +65,8 @@ module.exports = function (app, express, passport) {
 
   app
     .use(function (req, res, next) {
-      res.locals.pkg = pkg
+      res.locals.pkg      = pkg
+      res.locals.NODE_ENV = env
       next()
     })
     .use(flash())
@@ -96,7 +97,7 @@ module.exports = function (app, express, passport) {
       })
     })
 
-  if(env == 'development') {
+  if(env === 'development') {
 
     app
       .use(logger('dev'))

diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade
@@ -1,5 +1,9 @@
-script(src='/js/jquery-2.1.0.min.js')
-script(src='/js/bootstrap.min.js')
+script(src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js')
+script.
+  window.jQuery || document.write('<script src="/js/libs/jquery-2.1.0.min.js"><\/script>')
+
+script(src='/js/bootstrap.js')
+script(src='/js/apps.js')
 
 script.
   var _gaq = _gaq || []; _gaq.push(['_setAccount', 'XX-XXXXXXXX-X']); _gaq.push(['_trackPageview']);(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
diff --git a/app/views/includes/head.jade b/app/views/includes/head.jade
@@ -19,9 +19,12 @@ head(prefix="og: http://ogp.me/ns# express4-bootstrap-starter: http://ogp.me/ns/
   meta(property="og:image", content="")
   meta(property="og:site_name", content="#{pkg.app_name}")
 
-  link( rel="stylesheet" href="/css/bootstrap.min.css" type="text/css")
-  link( rel="stylesheet" href="/css/font-awesome.min.css" type="text/css")
-  link( rel="stylesheet" href="/css/styles.css" type="text/css")
+  if NODE_ENV == 'development'
+    link( rel="stylesheet" href="/css/bootstrap.css" type="text/css")
+    link( rel="stylesheet" href="/css/apps.css" type="text/css")
+
+  if NODE_ENV == 'production'
+    link( rel="stylesheet" href="/assets/css/apps.min.css" type="text/css")
 
   //[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

diff --git a/app/views/includes/header.jade b/app/views/includes/header.jade
@@ -7,6 +7,7 @@ div.navbar.navbar-default.navbar-fixed-top(role='navigation')
         span.icon-bar
         span.icon-bar
       a.navbar-brand(href='/')
+        img(src="/img/apps.png" width="50", height="50")
         span ExpressJS 4 Bootstrap
     .collapse.navbar-collapse
       ul.nav.navbar-nav.navbar-right