Merge pull request #880 from mohsen1/gulp-watch

Gulp watch

README.md

@@ -37,6 +37,9 @@ You can rebuild swagger-ui on your own to tweak it or just so you can say you di
 2. `npm run build`
 3. You should see the distribution under the dist folder. Open [`./dist/index.html`](./dist/index.html) to launch Swagger UI in a browser
 
+### Development
+Use `npm run build` to make a new build and `npm run serve` to start web server that will serve `dist` directory, watches for changes in files and reloads the page.
+
 ### Build using Docker
 
 To build swagger-ui using a docker container:

gulpfile.js

@@ -12,6 +12,8 @@ var less = require('gulp-less');
 var handlebars = require('gulp-handlebars');
 var wrap = require('gulp-wrap');
 var declare = require('gulp-declare');
+var watch = require('gulp-watch');
+var connect = require('gulp-connect');
 
 /*
  * Clean ups ./dist folder
@@ -31,7 +33,7 @@ function templates() {
   return gulp
     .src(['./src/main/template/**/*'])
     .pipe(handlebars())
-    .pipe(wrap('Handlebars.template(/*__DEFINING__*/<%= contents %>)'))
+    .pipe(wrap('Handlebars.template(<%= contents %>)'))
     .pipe(declare({
       namespace: 'Handlebars.templates',
       noRedeclare: true, // Avoid duplicate declarations
@@ -64,7 +66,8 @@ gulp.task('dist', ['clean'], function() {
     .pipe(uglify())
     .pipe(rename({extname: '.min.js'}))
     .on('error', gutil.log)
-    .pipe(gulp.dest('./dist'));
+    .pipe(gulp.dest('./dist'))
+    .pipe(connect.reload());
 });
 
 /*
@@ -79,14 +82,15 @@ gulp.task('less', ['clean'], function() {
     ])
     .pipe(less())
     .on('error', gutil.log)
-    .pipe(gulp.dest('./src/main/html/css/'));
+    .pipe(gulp.dest('./src/main/html/css/'))
+    .pipe(connect.reload());
 });
 
 
 /*
  * Copy lib and html folders
 */
-gulp.task('copy', ['clean'], function() {
+gulp.task('copy', ['less'], function() {
 
   // copy JavaScript files inside lib folder
   gulp
@@ -101,5 +105,25 @@ gulp.task('copy', ['clean'], function() {
     .on('error', gutil.log)
 });
 
+/*
+ * Watch for changes and recompile
+*/
+gulp.task('watch', function() {
+  return watch(['./src/**/*.{coffee,js,less}'], function() {
+    gulp.start('default');
+  });
+});
 
-gulp.task('default', ['dist', 'less', 'copy']);
+/*
+ * Live reload web server of `dist`
+*/
+gulp.task('connect', function() {
+  connect.server({
+    root: 'dist',
+    livereload: true
+  });
+});
+
+
+gulp.task('default', ['dist', 'copy']);
+gulp.task('serve', ['connect', 'watch'])

package.json

@@ -4,6 +4,7 @@
   "description": "Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API",
   "scripts": {
     "build": "./node_modules/gulp/bin/gulp.js;",
+    "serve": "./node_modules/gulp/bin/gulp.js serve;",
     "test": "./node_modules/gulp/bin/gulp.js; ./node_modules/mocha/bin/mocha src/test/e2e/index.js"
   },
   "repository": {
@@ -19,7 +20,6 @@
   "readmeFilename": "README.md",
   "dependencies": {},
   "devDependencies": {
-    "swagger-client": "2.1.0-alpha.7",
     "chai": "^1.10.0",
     "cors": "2.1.1",
     "docco": "0.4.x",
@@ -29,16 +29,19 @@
     "gulp-clean": "^0.3.1",
     "gulp-coffee": "^2.2.0",
     "gulp-concat": "^2.4.3",
+    "gulp-connect": "^2.2.0",
     "gulp-declare": "^0.3.0",
     "gulp-handlebars": "^3.0.1",
     "gulp-less": "^2.0.1",
     "gulp-rename": "^1.2.0",
     "gulp-uglify": "^1.1.0",
     "gulp-util": "^3.0.2",
+    "gulp-watch": "^4.1.0",
     "gulp-wrap": "^0.10.1",
     "http-server": "^0.7.4",
     "less": "~1.4.2",
     "mocha": "^2.1.0",
-    "selenium-webdriver": "^2.44.0"
+    "selenium-webdriver": "^2.44.0",
+    "swagger-client": "2.1.0-alpha.7"
   }
 }