adm351 · January 5, 2016 23:10 · Jan 24, 2014 · Jan 24, 2014 · Jan 16, 2014 · Jan 16, 2014
diff --git a/gulpfile.js b/gulpfile.js
@@ -54,6 +54,7 @@ gulp.task('assets', function() {
         .pipe(refresh(lrserver));
 });
 
+// Requires gulp >=v3.5.0
 gulp.task('watch', function () {
     gulp.watch('app/src/**', ['scripts']);
     gulp.watch('app/css/**', ['styles']);

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,73 +1,64 @@
-var gulp = require('gulp'),
-  sass = require('gulp-sass'),
-  browserify = require('gulp-browserify'),
-  concat = require('gulp-concat'),
-  embedlr = require('gulp-embedlr'),
-  refresh = require('gulp-livereload'),
-  lrserver = require('tiny-lr')(),
-  http = require('http'),
-  ecstatic = require('ecstatic'),
-  livereloadport = 35729,
-  serverport = 5000;
+var http = require('http');
+var gulp = require('gulp');
+var browserify = require('gulp-browserify');
+var concat = require('gulp-concat');
+var less = require('gulp-less');
+var refresh = require('gulp-livereload');
+var lr = require('tiny-lr');
+var lrserver = lr();
+var minifyCSS = require('gulp-minify-css');
+var embedlr = require('gulp-embedlr');
+var ecstatic = require('ecstatic');
+var imagemin = require('gulp-imagemin');
 
-//Task for sass using libsass through gulp-sass
-gulp.task('sass', function(){
-  gulp.src('sass/*.scss')
-    .pipe(sass())
-    .pipe(gulp.dest('build'))
-    .pipe(refresh(lrserver));
-});
-
-//Task for processing js with browserify
-gulp.task('browserify', function(){
-  gulp.src('js/*.js')
-   .pipe(browserify())
-   .pipe(concat('bundle.js'))
-   .pipe(gulp.dest('build'))
-   .pipe(refresh(lrserver));
-
-});
+var livereloadport = 35729,
+    serverport = 5001;
 
-//Task for embedding the livereload snippet into html-files
-//This could be replaced with connect-livereload if using a connect-static-server
-//Ecstatic(the static server in use) does not have livereload-middleware
-gulp.task('html', function(){
-  gulp.src('views/*.html')
-    .pipe(embedlr())
-    .pipe(gulp.dest('build'))
-    .pipe(refresh(lrserver));
+gulp.task('scripts', function() {
+    return gulp.src(['app/src/**/*.js'])
+        .pipe(browserify())
+        .pipe(concat('dest.js'))
+        .pipe(gulp.dest('dist/build'))
+        .pipe(refresh(lrserver));
 });
 
-//Convenience task for running a one-off build
-gulp.task('build', function() {
-  gulp.run('html', 'browserify', 'sass');
+gulp.task('styles', function() {
+    return gulp.src(['app/css/style.less'])
+        .pipe(less())
+        .on('error', console.log)
+        .pipe(minifyCSS())
+        .pipe(gulp.dest('dist/build'))
+        .pipe(refresh(lrserver));
 });
 
 gulp.task('serve', function() {
   //Set up your static fileserver, which serves files in the build dir
-  http.createServer(ecstatic({ root: __dirname + '/build' })).listen(serverport);
+  http.createServer(ecstatic({ root: __dirname + '/dist' })).listen(serverport);
 
   //Set up your livereload server
   lrserver.listen(livereloadport);
 });
 
-gulp.task('watch', function() {
-  //Add watching on sass-files
-  gulp.watch('sass/*.scss', function() {
-    gulp.run('sass');
-  });
-
-  //Add watching on js-files
-  gulp.watch('js/*.js', function() {
-    gulp.run('browserify');
-  });
 
-  //Add watching on html-files
-  gulp.watch('views/*.html', function () {
-    gulp.run('html');
-  });
+gulp.task('html', function() {
+    return gulp.src("app/*.html")
+        .pipe(embedlr())
+        .pipe(gulp.dest('dist/'))
+        .pipe(refresh(lrserver));
+})
+
+gulp.task('assets', function() {
+    return gulp.src("app/assets/**")
+        .pipe(imagemin({optimizationLevel: 5}))
+        .pipe(gulp.dest('dist/assets/'))
+        .pipe(refresh(lrserver));
+});
+
+gulp.task('watch', function () {
+    gulp.watch('app/src/**', ['scripts']);
+    gulp.watch('app/css/**', ['styles']);
+    gulp.watch('app/**/*.html', ['html']);
+    gulp.watch('app/assets/**', ['assets']);
 });
 
-gulp.task('default', function () {
-  gulp.run('build', 'serve', 'watch');
-});
+gulp.task('default', ['scripts', 'styles', 'html', 'assets', 'serve', 'watch']);
diff --git a/gulpfile-express.js b/gulpfile-express.js
@@ -49,14 +49,16 @@ gulp.task('build', function() {
   gulp.run('html', 'browserify', 'sass');
 });
 
-gulp.task('watch', function() {
-
+gulp.task('serve', function() {
   //Set up your static fileserver, which serves files in the build dir
   server.listen(serverport);
 
   //Set up your livereload server
   lrserver.listen(lrport);
-
+});
+
+gulp.task('watch', function() {
+
   //Add watching on sass-files
   gulp.watch('sass/*.scss', function() {
     gulp.run('sass');
@@ -71,4 +73,8 @@ gulp.task('watch', function() {
   gulp.watch('views/*.html', function () {
     gulp.run('html');
   });
+});
+
+gulp.task('default', function () {
+  gulp.run('build', 'serve', 'watch');
 });
diff --git a/gulpfile.js b/gulpfile.js
@@ -43,14 +43,15 @@ gulp.task('build', function() {
   gulp.run('html', 'browserify', 'sass');
 });
 
-gulp.task('watch', function() {
-
+gulp.task('serve', function() {
   //Set up your static fileserver, which serves files in the build dir
   http.createServer(ecstatic({ root: __dirname + '/build' })).listen(serverport);
 
   //Set up your livereload server
   lrserver.listen(livereloadport);
-
+});
+
+gulp.task('watch', function() {
   //Add watching on sass-files
   gulp.watch('sass/*.scss', function() {
     gulp.run('sass');
@@ -65,4 +66,8 @@ gulp.task('watch', function() {
   gulp.watch('views/*.html', function () {
     gulp.run('html');
   });
+});
+
+gulp.task('default', function () {
+  gulp.run('build', 'serve', 'watch');
 });
diff --git a/gulpfile-express.js b/gulpfile-express.js
@@ -0,0 +1,74 @@
+var gulp = require('gulp'),
+  sass = require('gulp-sass'),
+  browserify = require('gulp-browserify'),
+  concat = require('gulp-concat'),
+  embedlr = require('gulp-embedlr'),
+  refresh = require('gulp-livereload'),
+  lrserver = require('tiny-lr')(),
+  express = require('express'),
+  livereload = require('connect-livereload')
+  livereloadport = 35729,
+  serverport = 5000;
+
+//We only configure the server here and start it only when running the watch task
+var server = express();
+//Add livereload middleware before static-middleware
+server.use(livereload({
+  port: livereloadport
+}));
+server.use(express.static('./build'));
+
+//Task for sass using libsass through gulp-sass
+gulp.task('sass', function(){
+  gulp.src('sass/*.scss')
+    .pipe(sass())
+    .pipe(gulp.dest('build'))
+    .pipe(refresh(lrserver));
+});
+
+//Task for processing js with browserify
+gulp.task('browserify', function(){
+  gulp.src('js/*.js')
+   .pipe(browserify())
+   .pipe(concat('bundle.js'))
+   .pipe(gulp.dest('build'))
+   .pipe(refresh(lrserver));
+
+});
+
+//Task for moving html-files to the build-dir
+//added as a convenience to make sure this gulpfile works without much modification
+gulp.task('html', function(){
+  gulp.src('views/*.html')
+    .pipe(gulp.dest('build'))
+    .pipe(refresh(lrserver));
+});
+
+//Convenience task for running a one-off build
+gulp.task('build', function() {
+  gulp.run('html', 'browserify', 'sass');
+});
+
+gulp.task('watch', function() {
+
+  //Set up your static fileserver, which serves files in the build dir
+  server.listen(serverport);
+
+  //Set up your livereload server
+  lrserver.listen(lrport);
+
+  //Add watching on sass-files
+  gulp.watch('sass/*.scss', function() {
+    gulp.run('sass');
+  });
+
+  //Add watching on js-files
+  gulp.watch('js/*.js', function() {
+    gulp.run('browserify');
+  });
+
+  //Add watching on html-files
+  gulp.watch('views/*.html', function () {
+    gulp.run('html');
+  });
+});
diff --git a/gulpfile.js b/gulpfile.js
@@ -7,7 +7,7 @@ var gulp = require('gulp'),
   lrserver = require('tiny-lr')(),
   http = require('http'),
   ecstatic = require('ecstatic'),
-  livereload-port = 35729,
+  livereloadport = 35729,
   serverport = 5000;
 
 //Task for sass using libsass through gulp-sass
@@ -30,6 +30,7 @@ gulp.task('browserify', function(){
 
 //Task for embedding the livereload snippet into html-files
 //This could be replaced with connect-livereload if using a connect-static-server
+//Ecstatic(the static server in use) does not have livereload-middleware
 gulp.task('html', function(){
   gulp.src('views/*.html')
     .pipe(embedlr())
@@ -48,7 +49,7 @@ gulp.task('watch', function() {
   http.createServer(ecstatic({ root: __dirname + '/build' })).listen(serverport);
 
   //Set up your livereload server
-  lrserver.listen(lrport);
+  lrserver.listen(livereloadport);
 
   //Add watching on sass-files
   gulp.watch('sass/*.scss', function() {

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,67 @@
+var gulp = require('gulp'),
+  sass = require('gulp-sass'),
+  browserify = require('gulp-browserify'),
+  concat = require('gulp-concat'),
+  embedlr = require('gulp-embedlr'),
+  refresh = require('gulp-livereload'),
+  lrserver = require('tiny-lr')(),
+  http = require('http'),
+  ecstatic = require('ecstatic'),
+  livereload-port = 35729,
+  serverport = 5000;
+
+//Task for sass using libsass through gulp-sass
+gulp.task('sass', function(){
+  gulp.src('sass/*.scss')
+    .pipe(sass())
+    .pipe(gulp.dest('build'))
+    .pipe(refresh(lrserver));
+});
+
+//Task for processing js with browserify
+gulp.task('browserify', function(){
+  gulp.src('js/*.js')
+   .pipe(browserify())
+   .pipe(concat('bundle.js'))
+   .pipe(gulp.dest('build'))
+   .pipe(refresh(lrserver));
+
+});
+
+//Task for embedding the livereload snippet into html-files
+//This could be replaced with connect-livereload if using a connect-static-server
+gulp.task('html', function(){
+  gulp.src('views/*.html')
+    .pipe(embedlr())
+    .pipe(gulp.dest('build'))
+    .pipe(refresh(lrserver));
+});
+
+//Convenience task for running a one-off build
+gulp.task('build', function() {
+  gulp.run('html', 'browserify', 'sass');
+});
+
+gulp.task('watch', function() {
+
+  //Set up your static fileserver, which serves files in the build dir
+  http.createServer(ecstatic({ root: __dirname + '/build' })).listen(serverport);
+
+  //Set up your livereload server
+  lrserver.listen(lrport);
+
+  //Add watching on sass-files
+  gulp.watch('sass/*.scss', function() {
+    gulp.run('sass');
+  });
+
+  //Add watching on js-files
+  gulp.watch('js/*.js', function() {
+    gulp.run('browserify');
+  });
+
+  //Add watching on html-files
+  gulp.watch('views/*.html', function () {
+    gulp.run('html');
+  });
+});