Build js and css assets from bower and grunt

Heavily based on @robvdl improvement

.gitignore

@@ -20,5 +20,12 @@ gh-pages
 dist
 build
 
-#Pycharm conf
-.idea/
+# Pycharm conf
+.idea/
+
+# bower
+jsbuild/node_modules/*
+jsbuild/bower_components/*
+lwp/static/css/*.css
+lwp/static/js/*.js
+lwp/static/img/*

fabfile.py

@@ -74,8 +74,41 @@ def clone():
         local('git checkout origin/gh-pages -b gh-pages || true')
 
 
+@task(alias='assets')
+def build_assets():
+    """
+    Runs the assets pipeline, Grunt, bower, sass, etc.
+    """
+    # only run npm install when needed
+    if not os.path.exists('jsbuild/node_modules'):
+        with lcd('jsbuild'):
+            local('npm install')
+
+    # run Bower, then Grunt
+    with lcd('jsbuild'):
+        local('node_modules/.bin/bower install')
+        local('node_modules/.bin/grunt')
+
+
 @task
 def site():
     clone()
+    build_assets()
     debian()
     local('make -C gh-pages/')
+
+
+@task
+def clean_assets():
+    local('rm -rf lwp/static/js/vendor')
+    local('rm -f lwp/static/css/bootstrap.*')
+
+@task
+def clean_jsbuild():
+    local('rm -rf jsbuild/node_modules')
+    local('rm -rf jsbuild/bower_components')
+
+@task
+def clean():
+    clean_jsbuild()
+    clean_assets()

jsbuild/Gruntfile.js

@@ -0,0 +1,64 @@
+'use strict';
+
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        concat: {
+            js: {
+                src: [
+                    'bower_components/jquery/jquery.js',
+                    'bower_components/bootstrap/bootstrap/js/bootstrap.js',
+                    'bower_components/bootstrap-switch/build/js/bootstrap-switch.js',
+                    'bower_components/jqBootstrapValidation/dist/jqBootstrapValidation-1.3.7.js'
+                ],
+                dest: '../lwp/static/js/bootstrap.js'
+            },
+            css: {
+                src: [
+                    'bower_components/bootstrap/bootstrap/css/bootstrap.css',
+                    'bower_components/bootstrap/bootstrap/css/bootstrap-responsive.css',
+                    'bower_components/bootstrap-switch/build/css/bootstrap2/bootstrap-switch.css'
+                ],
+                dest: '../lwp/static/css/bootstrap.css'
+            }
+        },
+
+        uglify: {
+            compress: {
+                files: {
+                    '../lwp/static/js/bootstrap.min.js': ['../lwp/static/js/bootstrap.js']
+                },
+                options: {
+                    mangle: true
+                }
+            }
+        },
+
+        cssmin: {
+            build: {
+                src: '../lwp/static/css/bootstrap.css',
+                dest: '../lwp/static/css/bootstrap.min.css'
+            }
+        },
+
+        copy: {
+          main: {
+            expand: true,
+            cwd: 'bower_components/bootstrap/',
+            src: 'img/*',
+            dest: '../lwp/static/img/',
+            flatten: true,
+            filter: 'isFile',
+          },
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+    grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'copy']);
+};

jsbuild/README.md

@@ -0,0 +1,14 @@
+About this directory
+====================
+
+In order to not pollute the root directory of this Python project with JS
+build tool files, we use a directory "jsbuild" for this.
+
+This just keeps the project a bit tidier and puts all frontend tools
+in one place.
+
+The npm node_modules and bower_components folders get created here.
+
+npm, bower, and grunt are all executed from the fabfile.py
+
+The fabfile.py is then invoked by the debian packaging process.

jsbuild/bower.json

@@ -0,0 +1,22 @@
+{
+    "name": "lwp-bower",
+    "version": "0.1",
+    "authors": [
+        "Rob van der Linde <robvdl@gmail.com>",
+        "Claudio Mignanti <c.mignanti@gmail.com>"
+    ],
+    "license": "MIT",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "test",
+        "tests"
+    ],
+    "dependencies": {
+        "jquery": "~2.0.3",
+        "bootstrap": "git@github.com:alonisser/bower-bootstrap-2.3.2-legacy.git",
+        "bootstrap-switch": "~2.0.1",
+        "jqBootstrapValidation": "git@github.com:ReactiveRaven/jqBootstrapValidation.git"
+    }
+}

jsbuild/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "lwp-jsbuild",
+    "description": "JavaScript build environment",
+    "author": "Rob van der Linde",
+    "tags": [],
+    "repository": "https://github.com/robvdl/LXC-Web-Panel.git",
+    "version": "0.1.1",
+    "engines": {
+        "node": ">=0.10.11"
+    },
+    "devDependencies": {
+        "bower": "~1.3.9",
+        "grunt": "~0.4.5",
+        "grunt-cli": "~0.1.13",
+        "grunt-contrib-concat": "~0.5.0",
+        "grunt-contrib-copy": "~0.7.0",
+        "grunt-contrib-uglify": "~0.5.1",
+        "grunt-contrib-cssmin": "~0.10.0"
+    }
+}

lwp/templates/layout.html

@@ -6,9 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
 
-    <link href="{{ url_for('static', filename='bower/bootstrap/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='bower/bootstrap/bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='bower/bootstrap-switch/build/css/bootstrap2/bootstrap-switch.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/site.css') }}" rel="stylesheet">
 
     <!--[if lt IE 9]>
@@ -58,10 +56,7 @@
 <!-- Le javascript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="{{ url_for('static', filename='bower/jquery/jquery.min.js') }}"></script>
-<script src="{{ url_for('static', filename='bower/bootstrap/bootstrap/js/bootstrap.min.js') }}"></script>
-<script src="{{ url_for('static', filename='bower/jqBootstrapValidation/dist/jqBootstrapValidation-1.3.7.js') }}"></script>
-<script src="{{ url_for('static', filename='bower/bootstrap-switch/build/js/bootstrap-switch.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 <script>
                 $(function() {
                         $(".alert").not('.dont-hide').alert().delay(5000).slideUp();