Hot reload (live reload) page and module example with bs-injular plugin for browser-sync

gulp/scripts.js

@@ -9,18 +9,24 @@ var browserSync = require('browser-sync');
 var $ = require('gulp-load-plugins')();
 
 
-gulp.task('scripts-reload', function() {
- return buildScripts()
- .pipe(browserSync.stream());
+gulp.task('scripts-reload', function () {
+
+ var bsOptions = {};
+ if (conf._gulpWatchEvent) {
+ bsOptions.match = conf._gulpWatchEvent.path;
+ }
+
+ return buildScripts()
+ .pipe(browserSync.stream(bsOptions));
 });
 
-gulp.task('scripts', function() {
- return buildScripts();
+gulp.task('scripts', function () {
+  return buildScripts();
 });
 
 function buildScripts() {
- return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
- .pipe($.eslint())
- .pipe($.eslint.format())
- .pipe($.size())
+  return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
+  .pipe($.eslint())
+  .pipe($.eslint.format())
+  .pipe($.size())
 };

gulp/server.js

@@ -47,6 +47,18 @@ browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
 }));
 
+var bsInjular = require('bs-injular');
+
+browserSync.use(bsInjular, {
+ templates: ['/app/pages/**/*.html','/app/my-module/**/*.html'],
+ controllers: ['/app/pages/**/*.controller.js','/app/my-module/**/*.controller.js'],
+ directives: ['/app/pages/**/*.directive.js','/app/my-module/**/*.directive.js'],
+ filters: ['/app/pages/**/*.filter.js','/app/pages/**/*.filter.js'],
+ angularFile: '/bower_components/angular/angular.js',
+ moduleFile: '/app/app.js',
+ ngApp: 'BlurAdmin'
+});
+
 gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
 });

gulp/styles.js

@@ -34,6 +34,7 @@ var buildStyles = function () {
 
  var injectFiles = gulp.src([
  path.join(conf.paths.src, '/sass/**/_*.scss'),
+ path.join(conf.paths.src, '/app/**/*.scss'),
  '!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss'),
  '!' + path.join(conf.paths.src, '/sass/404.scss'),
  '!' + path.join(conf.paths.src, '/sass/auth.scss')

gulp/watch.js

@@ -16,7 +16,9 @@ gulp.task('watch', ['inject'], function () {
 
  gulp.watch([
  path.join(conf.paths.src, '/sass/**/*.css'),
- path.join(conf.paths.src, '/sass/**/*.scss')
+ path.join(conf.paths.src, '/sass/**/*.scss'),
+ path.join(conf.paths.src, '/app/**/*.scss')
+
  ], function(event) {
  if(isOnlyChange(event)) {
  gulp.start('styles-reload');
@@ -26,11 +28,13 @@ gulp.task('watch', ['inject'], function () {
  });
 
  gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
+ conf._gulpWatchEvent = event;
  if(isOnlyChange(event)) {
  gulp.start('scripts-reload');
  } else {
  gulp.start('inject-reload');
  }
+ delete conf._gulpWatchEvent;
  });
 
  gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {

package.json

@@ -2,8 +2,9 @@
  "name": "blur_admin",
  "version": "1.2.0",
  "devDependencies": {
- "browser-sync": "~2.9.11",
+ "browser-sync": "^2.18.2",
  "browser-sync-spa": "~1.0.3",
+ "bs-injular": "^0.6.0",
  "chalk": "~1.1.1",
  "del": "~2.0.2",
  "eslint-plugin-angular": "~0.12.0",

src/app/app.js

@@ -14,5 +14,6 @@ angular.module('BlurAdmin', [
  'angular-progress-button-styles',
 
  'BlurAdmin.theme',
- 'BlurAdmin.pages'
+ 'BlurAdmin.pages',
+ 'my-module'
 ]);

src/app/my-module/my-module.js

@@ -0,0 +1,17 @@
+
+/**
+ * Created by sguilly on 23/10/16.
+ */
+(function () {
+ 'use strict';
+
+ /* @ngdoc object
+ * @name models
+ * @description
+ *
+ */
+ angular
+ .module('my-module', [
+ 'my-page'
+ ]);
+}());

src/app/my-module/my-page/my-page.controller.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc object
+ * @name category.controller:CategoriesCtrl
+ *
+ * @description
+ *
+ */
+ angular
+ .module('my-page')
+ .controller('MyPageCtrl', MyPageCtrl);
+
+ function MyPageCtrl($scope, $state,MyPageService) {
+
+ var vm = this;
+ vm.ctrlName = 'My Hot Reload Page :)';
+
+ }
+}());

src/app/my-module/my-page/my-page.directive.js

@@ -0,0 +1,46 @@
+/**
+ * Created by sguilly on 21/10/16.
+ */
+
+/**
+ * Created by sguilly on 19/10/16.
+ */
+
+(function () {
+ 'use strict';
+
+ // <div address-input max="77" ng-model="poi.address"></div>
+
+ angular
+ .module('my-page')
+ .directive('myPageDirective', myPageDirective);
+
+ function myPageDirective() {
+ var directive = {
+ restrict: 'EA',
+ template: '<div class="blue">{{vm.text}} - {{vm.serviceText}}</div>'
+ ,
+ scope: {
+
+ text: '=?',
+ ngModel: '=',
+
+ },
+ require: 'ngModel',
+ controller: MyPageDirectiveCtrl,
+ controllerAs: 'vm',
+ bindToController: true
+ };
+
+ return directive;
+ }
+
+ MyPageDirectiveCtrl.$inject = ['HotReloadService'];
+ function MyPageDirectiveCtrl(MyPageService) {
+ var vm = this;
+
+ vm.serviceText = MyPageService.getText()
+
+ }
+
+}());

src/app/my-module/my-page/my-page.html

@@ -0,0 +1,9 @@
+<div class="widgets red">
+
+ {{vm.ctrlName}}
+
+ <my-page-directive text="'my directive text'"></my-page-directive>
+
+</div>
+
+

src/app/my-module/my-page/my-page.module.js

@@ -0,0 +1,16 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+ 'use strict';
+
+ /* @ngdoc object
+ * @name categories
+ * @description
+ *
+ */
+ angular
+ .module('my-page', [
+ 'ui.router'
+ ]);
+}());

src/app/my-module/my-page/my-page.routes.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+ 'use strict';
+
+ angular
+ .module('hotReloadPage')
+ .config(config);
+
+ function config($stateProvider) {
+ $stateProvider
+ .state('my-page', {
+ url: '/my-page',
+ templateUrl: 'app/my-module/my-page/my-page.html',
+ controller: 'MyPageCtrl',
+ controllerAs: 'vm',
+ title: 'my-page',
+ sidebarMeta: {
+ order: 0,
+ },
+ });
+ }
+}());

src/app/my-module/my-page/my-page.scss

@@ -0,0 +1,13 @@
+.blue {
+ background-color: #777aff;
+ color: white;
+ margin : 20px;
+ padding : 20px;
+}
+
+.red {
+ background-color: #e81c2e;
+ color: white;
+ margin : 20px;
+ padding : 20px;
+}

src/app/my-module/my-page/my-page.service.js

@@ -0,0 +1,16 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+
+'use strict';
+
+angular.module('my-page')
+
+ .service('MyPageService', function () {
+
+ this.getText = function()
+ {
+ return 'MyService'
+ }
+
+ });

src/app/pages/hotReload/hotReload.js

@@ -0,0 +1,17 @@
+
+/**
+ * Created by sguilly on 23/10/16.
+ */
+(function () {
+ 'use strict';
+
+ /* @ngdoc object
+ * @name models
+ * @description
+ *
+ */
+ angular
+ .module('BlurAdmin.pages.hotReload', [
+ 'hotReloadPage'
+ ]);
+}());

src/app/pages/hotReload/hotReloadPage/hotReload.controller.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+ 'use strict';
+
+ /**
+ * @ngdoc object
+ * @name category.controller:CategoriesCtrl
+ *
+ * @description
+ *
+ */
+ angular
+ .module('hotReloadPage')
+ .controller('HotReloadCtrl', HotReloadCtrl);
+
+ function HotReloadCtrl($scope, $state,MyPageService) {
+
+ var vm = this;
+ vm.ctrlName = 'Hot Reload Page';
+
+ }
+}());

src/app/pages/hotReload/hotReloadPage/hotReload.directive.js

@@ -0,0 +1,46 @@
+/**
+ * Created by sguilly on 21/10/16.
+ */
+
+/**
+ * Created by sguilly on 19/10/16.
+ */
+
+(function () {
+ 'use strict';
+
+ // <div address-input max="77" ng-model="poi.address"></div>
+
+ angular
+ .module('hotReloadPage')
+ .directive('hotReloadDirective', myPageDirective);
+
+ function myPageDirective() {
+ var directive = {
+ restrict: 'EA',
+ template: '<div class="blue">{{vm.text}} - {{vm.serviceText}}</div>'
+ ,
+ scope: {
+
+ text: '=?',
+ ngModel:'=',
+
+ },
+ require: 'ngModel',
+ controller: HotReloadDirectiveCtrl,
+ controllerAs: 'vm',
+ bindToController: true
+ };
+
+ return directive;
+ }
+
+ HotReloadDirectiveCtrl.$inject = ['HotReloadService'];
+ function HotReloadDirectiveCtrl(HotReloadService) {
+ var vm = this;
+
+ vm.serviceText = HotReloadService.getText()
+
+ }
+
+}());