GUI - bundle on diet 10/44010/3
authorDaniel Malachovsky <dmalacho@cisco.com>
Mon, 15 Aug 2016 19:55:21 +0000 (21:55 +0200)
committerVladimir Lavor <vlavor@cisco.com>
Mon, 22 Aug 2016 12:28:04 +0000 (12:28 +0000)
- added Gulp support
- bundle containst only necessary files from vendor folder
- bundle size dropped from ~8MB to ~5MB

Change-Id: I66d6608de52ee8914a43e5cead9383db2224ba3c
Signed-off-by: Daniel Malachovsky <dmalacho@cisco.com>
groupbasedpolicy-ui/bundle/pom.xml
groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
groupbasedpolicy-ui/module/pom.xml
groupbasedpolicy-ui/module/src/main/resources/gbp/.gitignore [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/build.config.js [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/gulpfile.js [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/package.json

index ee739f1481c8c4ee627a12cded787c7b93e1d0e5..897d8021ed75df0a5dadc1808d06636ee20fe136 100644 (file)
@@ -53,7 +53,8 @@
               <outputDirectory>${project.build.directory}/generated-resources</outputDirectory>
               <groupId>org.opendaylight.dlux</groupId>
               <includeArtifactIds>groupbasedpolicy-ui-module</includeArtifactIds>
-              <excludes>META-INF\/**,gbp/node\/**,gbp/node_modules\/**</excludes>
+                <includes>gbp/build\/**</includes>
+                <excludes>META-INF\/**,gbp/node\/**,gbp/node_modules\/**</excludes>
               <excludeTransitive>true</excludeTransitive>
               <ignorePermissions>false</ignorePermissions>
             </configuration>
index bbfef581f42025701d93dbad7ad4a7138860df62..ddccfc9b95d417af89c09dd661356e75cbea876b 100644 (file)
@@ -6,13 +6,13 @@
         <property name="loader" ref="loader"/>
         <property name="moduleName" value="gbp"/>
         <property name="url" value="/src/app/gbp"/>
-        <property name="directory" value="/gbp"/>
+        <property name="directory" value="/gbp/build"/>
         <property name="requireJs" value="app/gbp/main"/>
         <property name="angularJs" value="app.gbp"/>
                <property name="cssDependencies">
             <list>
                 <value>src/app/gbp/common/gbp.css</value>
-                <value>src/app/gbp/vendor/angular-material/angular-material.css</value>
+                <value>src/app/gbp/vendor/angular-material/angular-material.min.css</value>
                 <value>src/app/gbp/vendor/angular-material-data-table/dist/md-data-table.min.css</value>
                 <value>src/app/gbp/vendor/roboto-fontface/css/roboto-fontface.css</value>
                 <value>src/app/gbp/vendor/NeXt/css/next.min.css</value>
index 8711ff40b0379655f94fbbdc63b3facd75d5ccee..566aa37342ef23971ad5ce9254cf9bc57acfbdcc 100644 (file)
                             <goal>bower</goal>
                         </goals>
                     </execution>
+                    <execution>
+                        <id>gulp</id>
+                        <goals>
+                            <goal>gulp</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>build</arguments>
+                        </configuration>
+                    </execution>
                 </executions>
             </plugin>
         </plugins>
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/.gitignore b/groupbasedpolicy-ui/module/src/main/resources/gbp/.gitignore
new file mode 100644 (file)
index 0000000..63e5a75
--- /dev/null
@@ -0,0 +1,3 @@
+node_modules/
+vendor/
+build/
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/build.config.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/build.config.js
new file mode 100644 (file)
index 0000000..b53052b
--- /dev/null
@@ -0,0 +1,78 @@
+/**
+ * This file/module contains all configuration for the build process.
+ */
+module.exports = {
+    /**
+     * The `build_dir` folder is where our projects are compiled during
+     * development and the `compile_dir` folder is where our app resides once it's
+     * completely built.
+     */
+    build_dir: 'build',
+    app_dir: 'app',
+
+    /**
+     * This is a collection of file patterns that refer to our app code (the
+     * stuff in `src/`). These file paths are used in the configuration of
+     * build tasks. `js` is all project javascript, less tests. `ctpl` contains
+     * our reusable components' (`src/common`) template HTML files, while
+     * `atpl` contains the same, but for our app's code. `html` is just our
+     * main HTML file, `less` is our main stylesheet, and `unit` contains our
+     * app's unit tests.
+     */
+    app_files: {
+        js: ['*/**/*.js', '!node/**/*.*', '!node_modules/**/*.*', '!vendor/**/*.*'],
+        root_js: ['main.js'],
+
+        templates: ['*/**/*.tpl.html'],
+    },
+
+    assets_files: {
+        css: ['common/*.css'],
+    },
+
+    /**
+     * This is a collection of files used during testing only.
+     */
+
+
+    /**
+     * This is the same as `app_files`, except it contains patterns that
+     * reference vendor code (`vendor/`) that we need to place into the build
+     * process somewhere. While the `app_files` property ensures all
+     * standardized files are collected for compilation, it is the user's job
+     * to ensure non-standardized (i.e. vendor-related) files are handled
+     * appropriately in `vendor_files.js`.
+     *
+     * The `vendor_files.js` property holds files to be automatically
+     * concatenated and minified with our project source files.
+     *
+     * The `vendor_files.css` property holds any CSS files to be automatically
+     * included in our app.
+     *
+     * The `vendor_files.assets` property holds any assets to be copied along
+     * with our app's assets. This structure is flattened, so it is not
+     * recommended that you use wildcards.
+     */
+    vendor_files: {
+        js: [
+            'angular-material/angular-material.min.js',
+            'angular-animate/angular-animate.min.js',
+            'angular-aria/angular-aria.min.js',
+            'angular-material-data-table/dist/md-data-table.min.js',
+            'angular-messages/angular-messages.min.js',
+            'NeXt/js/next.min.js',
+        ],
+        css: [
+            'angular-material/angular-material.min.css',
+            'roboto-fontface/css/roboto-fontface.css',
+            'angular-material-data-table/dist/md-data-table.min.css',
+            'NeXt/css/next.min.css',
+
+        ],
+        fonts: [
+            'roboto-fontface/fonts/*.*',
+            'NeXt/fonts/*.*',
+        ]
+    }
+
+};
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/gulpfile.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/gulpfile.js
new file mode 100644 (file)
index 0000000..6e06622
--- /dev/null
@@ -0,0 +1,89 @@
+var gulp = require('gulp'),
+    del = require('del'),
+    gutil = require('gulp-util'),
+    concat = require('gulp-concat'),
+    runSequence = require('run-sequence'),
+    install = require("gulp-install");
+
+var config = require( './build.config.js' );
+
+/**
+ * Task for cleaning build directory
+ */
+gulp.task('clean', function() {
+    // You can use multiple globbing patterns as you would with `gulp.src`
+    return del([config.build_dir]);
+});
+
+/**
+ * Copy assets
+ */
+gulp.task('copyCss', function () {
+    return gulp.src(config.assets_files.css)
+        .pipe(gulp.dest(config.build_dir + '/common'));
+});
+
+/**
+ * Copy app files
+ */
+gulp.task('copyTemplates', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying APP Template files'));
+    // Copy html
+    return gulp.src(config.app_files.templates)
+        .pipe(gulp.dest(config.build_dir));
+});
+
+gulp.task('copyAppJs', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying APP Controller JS files'));
+    return gulp.src(config.app_files.js)
+        .pipe(gulp.dest(config.build_dir));
+});
+
+gulp.task('copyRootJs', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying APP Root JS files'));
+    return gulp.src(config.app_files.root_js)
+        .pipe(gulp.dest(config.build_dir));
+});
+
+/**
+  * Copy vendor files
+ */
+gulp.task('copyVendorCss', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying VENDOR css'));
+    return gulp.src(config.vendor_files.css, { cwd : 'vendor/**' })
+        .pipe(gulp.dest(config.build_dir + '/vendor'))
+});
+
+gulp.task('copyVendorFonts', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying VENDOR fonts'));
+    return gulp.src(config.vendor_files.fonts, { cwd : 'vendor/**' })
+        .pipe(gulp.dest(config.build_dir + '/vendor'))
+});
+
+gulp.task('copyVendorJs', function () {
+    gutil.log(gutil.colors.cyan('INFO :: copying VENDOR js files'));
+    return gulp.src(config.vendor_files.js, { cwd : 'vendor/**' })
+        .pipe(gulp.dest(config.build_dir + '/vendor'))
+});
+
+
+/**
+ * Copy task aggregated
+ */
+gulp.task('copy', function() {
+    runSequence([
+        'copyCss',
+        'copyTemplates',
+        'copyAppJs',
+        'copyRootJs',
+        'copyVendorCss',
+        'copyVendorFonts'
+    ], 'copyVendorJs');
+});
+
+/**
+ * Build task
+ */
+gulp.task('build', function(){
+    runSequence('clean', 'copy');
+});
index 8a28c7bdf2a42cd91ab9c22720faa7a36229c6c9..0b567002a7da90888d470f243e53bd021523e70e 100644 (file)
     "url": "https://git.opendaylight.org/gerrit/groupbasedpolicy.git"
   },
   "dependencies": {
-    "bower": "1.7.9"
+    "bower": "1.7.9",
+    "del": "^2.2.0",
+    "gulp-util": "^3.0.7",
+    "gulp-concat": "^2.6.0",
+    "gulp-install": "^0.6.0",
+    "run-sequence": "^1.1.5"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "gulp": "^3.9.1"
+  }
 }