gulpfile completed with browserSync

kengz · Jun 18, 2015 · fcb3085 · fcb3085
1 parent 48a2a52
commit fcb3085
Show file tree

Hide file tree

Showing 6 changed files with 272 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ bin-debug/
 bin-release/
 node_modules/
 coverage/
+chart/build/
 
 # Other files and folders
 .settings/

diff --git a/chart/src/index.html b/chart/src/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>lomath chart visualizer</title>
+
+    <!-- library scripts: jQuery and highcharts -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <!-- highcharts -->
+    <script src="http://code.highcharts.com/highcharts.js"></script>
+
+  </head>
+  <body>
+    <h1>Shutup YH I know it's ugly</h1>
+    <div id="container" style="width:100%; height:400px;"></div>
+    <h2>my chart2</h2>
+    <div id="container2" style="width:100%; height:400px;"></div>
+
+    <!-- inject:div -->
+    <!-- endinject -->
+
+    <!-- inject:js -->
+    <!-- endinject -->
+  </body>
+</html>
diff --git a/chart/src/js/chart.js b/chart/src/js/chart.js
@@ -0,0 +1,90 @@
+var _ = require('../../../index.js');
+
+var options = {
+  credits: false,
+  chart: {
+    renderTo: 'container'
+  },
+  title: {
+    text: 'My title'
+  },
+  subtitle: {
+    text: 'My subtitle'
+  },
+  tooltip: {
+    borderRadius: 0,
+    borderWidth: 1,
+    crosshairs: [true, false]
+  },
+  xAxis: {
+    type: 'date time'
+    // categories: ['Apples', 'Bananas', 'Oranges']
+  },
+  yAxis: {
+    title: {
+      text: 'Fruit eaten'
+    }
+  },
+  series: [{
+    data: _.square(_.range(10)),
+    // data: [1,2,3,4,5],
+    pointStart: 0,
+    pointInterval: 1
+    // name: 'Jane',
+    // data: _.range(3)
+  // }, {
+    // name: 'John',
+    // data: [5, 7, 3]
+  }]
+};
+
+
+
+
+
+
+// sample theme
+Highcharts.theme = {
+    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
+             '#FF9655', '#FFF263', '#6AF9C4'],
+    chart: {
+        backgroundColor: {
+            linearGradient: [0, 0, 500, 500],
+            stops: [
+                [0, 'rgb(255, 255, 255)'],
+                [1, 'rgb(240, 240, 255)']
+            ]
+        },
+    },
+    title: {
+        style: {
+            color: '#000',
+            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
+        }
+    },
+    subtitle: {
+        style: {
+            color: '#666666',
+            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+        }
+    },
+
+    legend: {
+        itemStyle: {
+            font: '9pt Trebuchet MS, Verdana, sans-serif',
+            color: 'black'
+        },
+        itemHoverStyle:{
+            color: 'gray'
+        }
+    }
+};
+
+
+
+$(function() {
+  // Apply the theme
+  // Highcharts.setOptions(Highcharts.theme);
+
+  var chart1 = new Highcharts.Chart(options);
+});
diff --git a/chart/src/js/chart2.js b/chart/src/js/chart2.js
@@ -0,0 +1,47 @@
+var _ = require('../../../index.js');
+
+var options = {
+  credits: false,
+  chart: {
+    renderTo: 'container2'
+  },
+  title: {
+    text: 'My title2'
+  },
+  subtitle: {
+    text: 'My subtitle'
+  },
+  tooltip: {
+    borderRadius: 0,
+    borderWidth: 1,
+    crosshairs: [true, false]
+  },
+  xAxis: {
+    type: 'date time'
+    // categories: ['Apples', 'Bananas', 'Oranges']
+  },
+  yAxis: {
+    title: {
+      text: 'Fruit eaten'
+    }
+  },
+  series: [{
+    data: _.square(_.range(10)),
+    pointStart: 0,
+    pointInterval: 1
+    // name: 'Jane',
+    // data: _.range(3)
+  // }, {
+    // name: 'John',
+    // data: [5, 7, 3]
+  }]
+};
+
+
+
+$(function() {
+  // Apply the theme
+  // Highcharts.setOptions(Highcharts.theme);
+
+  var chart1 = new Highcharts.Chart(options);
+});
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,99 @@
+// dependencies
+var browserify = require('browserify');
+var browserSync = require('browser-sync').create();
+var glob = require('glob');
+var gulp = require('gulp');
+var inject = require('gulp-inject');
+var q = require('q');
+var source = require('vinyl-source-stream');
+var through = require('through2');
+
+// file paths
+var srcPath = './chart/src';
+var buildPath = './chart/build';
+
+// gulp tasks
+gulp.task('default', ['start']);
+gulp.task('start', ['seq', 'watch']);
+
+// watch for file changes in srcPath
+gulp.task('watch', ['seq'], function() {
+    gulp.watch(srcPath + '/**/*', ['seq'])
+})
+
+// alias for repeating tasks
+gulp.task('seq', ['browserify', 'inject', 'reload']);
+
+// browserify all js files into a single bundle.js
+gulp.task('browserify', function(callback) {
+    var bundledStream = through();
+
+    bundledStream
+    .pipe(source('bundle.js'))
+    .pipe(gulp.dest(buildPath + '/js'))
+    .on('end', function(){
+        callback() //wait till bundledStream ends to callback
+    })
+
+    return glob(srcPath + '/js/*.js', function(err, entries) {
+        if (err) {
+            bundledStream.emit('error', err);
+            return;
+        };
+
+        var b = browserify({
+            entries: entries,
+            debug: true
+        })
+
+        return b.bundle().pipe(bundledStream)
+    })
+});
+
+
+// Injecting browserified js script tag into html
+gulp.task('inject', ['browserify'], function() {
+    var target = gulp.src(srcPath + '/index.html');
+    var source = gulp.src([buildPath + '/js/*.js'], {
+        read: false
+    });
+    return target.pipe(inject(source, {
+        relative: true
+    }))
+    // .pipe(inject('lorem', {
+    //     starttag: '<!-- inject:div -->'
+    // }))
+    .pipe(gulp.dest(buildPath))
+})
+
+
+// Reloading browserSync
+gulp.task('reload', ['inject'], reload);
+// reload browserSync
+function reload() {
+    var defer = q.defer();
+
+    if (browserSync.active) {
+        browserSync.reload();
+        defer.resolve();
+    } else
+    startServer().then(defer.resolve);
+
+    return defer.promise;
+}
+// start a browserSync server to index.html directly
+function startServer() {
+    var defer = q.defer();
+
+    var serverConfig = {
+        server: {
+            baseDir: 'chart',
+            directory: true
+        },
+        startPath: '/build/index.html',
+        logPrefix: 'SERVER'
+    };
+    browserSync.init(serverConfig, defer.resolve);
+
+    return defer.promise;
+}
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "A high performance, professional math module built on lodash.",
   "main": "index.js",
   "scripts": {
+    "start": "gulp",
     "test": "istanbul cover ./node_modules/.bin/_mocha -- -u tdd -R spec"
   },
   "repository": {
@@ -14,11 +15,19 @@
     "lodash": "^3.9.3"
   },
   "devDependencies": {
+    "browser-sync": "^2.7.12",
+    "browserify": "^10.2.4",
     "chai": "^3.0.0",
     "coveralls": "^2.11.2",
+    "glob": "^5.0.10",
+    "gulp": "^3.9.0",
+    "gulp-inject": "^1.3.1",
     "istanbul": "^0.3.15",
     "mocha": "^2.2.5",
-    "mocha-lcov-reporter": "0.0.2"
+    "mocha-lcov-reporter": "0.0.2",
+    "q": "^1.4.1",
+    "through2": "^2.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
   "keywords": [
     "lomath",