WA开发环境：换用更简单的 gulp-connect 实现本地开发服务器

gulpfile.js

@@ -1,67 +1,50 @@
-var path = require('path');
+// The Great Gulp
 var gulp = require('gulp');
-var gutil = require('gulp-util');
-var express = require('express');
-var tinylr = require('tiny-lr');
-var connectlr = require('connect-livereload');
-var open = require('open');
+var $ = require('gulp-load-plugins')();
 
-/**************************************
- *                 Launch Local Servers
- */
-
-var LIVERELOAD_PORT = 35729;
-var EXPRESS_PORT = 9999;
+var LOCAL_PORT = 9999;
 var SOURCE_ROOT = __dirname + '/app';
 var BUILD_ROOT = __dirname + '/dist';
+var BROWSER = 'Google Chrome Canary';
 
-function createServers (root, port, lrport) {
-
-  // App Server
-  var app = express();
-  app.use(connectlr());
-  app.use(express.static(path.resolve(root)));
-  app.listen(port, function () {
-    gutil.log('Listening on', port, SOURCE_ROOT);
-  });
-
-  // Livereload Server
-  var lr = tinylr();
-  lr.listen(lrport, function () {
-    gutil.log('LR Listening on', lrport);
-  });
-
-  // Notify livereload of changes detected
-  var onchange = function (evt) {
-    gutil.log(gutil.colors.cyan(evt.path), 'changed');
-    lr.changed({
-      body: {
-        files: [evt.path]
-      }
-    })
-  };
+/**
+ * =====================================
+ *                 Launch Local Servers
+ * =====================================
+ */
 
-  return {
-    lr: lr,
-    app: app,
-    onchange: onchange
-  };
+gulp.task('connect:dev', $.connect.server({
+  livereload: true,
+  root: [SOURCE_ROOT],
+  port: LOCAL_PORT,
+  open: { browser: BROWSER }
+}));
+
+gulp.task('connect:dist', $.connect.server({
+  livereload: true,
+  root: [BUILD_ROOT],
+  port: LOCAL_PORT,
+  open: { browser: BROWSER }
+}));
+
+// Log & Notify Livereload
+function onchange(event) {
+  $.util.log($.util.colors.cyan(event.path), 'changed');
+  return gulp.src(event.path)
+    .pipe($.connect.reload());
 }
 
-gulp.task('serverdev', function () {
-  var servers = createServers(SOURCE_ROOT, EXPRESS_PORT, LIVERELOAD_PORT);
-  gulp.watch(['./app/**/*', '!./app/node_modules/**/*'], servers.onchange);
-  open('http://localhost:9999');
-});
-
-gulp.task('serverdist', function () {
-  var servers = createServers(BUILD_ROOT, EXPRESS_PORT, LIVERELOAD_PORT);
-  gulp.watch([BUILD_ROOT + '/**.*'], servers.onchange);
-  open('http://localhost:9999');
+gulp.task('server', ['connect:dev'], function () {
+  gulp.watch([
+      SOURCE_ROOT + '/**/*',
+      '!' + SOURCE_ROOT + '/node_modules/**/*'
+  ], onchange);
 });
 
-/**************************************
- *                       Building Works
+/**
+ * =====================================
+ *                             Building
+ * =====================================
  */
 
 //var sass = require('gulp-ruby-sass');
@@ -111,11 +94,13 @@ gulp.task('build', ['clean'], function () {
   gulp.start('usemin', 'imagemin', 'copy');
 });
 
-/**************************************
+/**
+ * =====================================
  *                         Distribution
+ * =====================================
  */
 
-function sh (commands) {
+function sh(commands) {
   var exec = require('child_process').exec;
   var sys = require('sys');
   for (var i = 0, l = arguments.length; i < l; i++) {
@@ -130,7 +115,7 @@ function sh (commands) {
   }
 }
 
-function distribution (tar) {
+function distribution(tar) {
   var targets = {
     prod: '[email protected]:/usr/local/httpd/htdocs/tohell/html/',
     beta: '[email protected]:/usr/local/httpd/htdocs/beta/html/'
@@ -140,16 +125,18 @@ function distribution (tar) {
   sh('rsync ' + BUILD_ROOT + '/ ' + targets[tar].beta + rsyncParams);
 }
 
-gulp.task('dist',function(){
+gulp.task('dist', function () {
   distribution('beta');
 });
 
-gulp.task('dist:prod',function(){
+gulp.task('dist:prod', function () {
   distribution('prod');
 });
 
-/**************************************
+/**
+ * =====================================
  *                        General Tasks
+ * =====================================
  */
 
-gulp.task('default', ['serverdev']);
+gulp.task('default', ['server']);

package.json

@@ -3,19 +3,26 @@
   "version": "0.0.0",
   "dependencies": {},
   "devDependencies": {
-    "gulp": "^3.5.0",
-    "gulp-util": "^2.2.0",
-    "open": "^0.0.4",
-    "express": "^3.4.7",
-    "tiny-lr": "^0.0.5",
-    "connect-livereload": "*",
     "gulp-usemin": "^0.3.1",
     "gulp-uglify": "^0.2.1",
     "gulp-minify-css": "^0.3.0",
     "gulp-minify-html": "^0.1.0",
     "gulp-rev": "^0.2.1",
-    "gulp-clean": "^0.2.4",
-    "gulp-imagemin": "^0.1.5",
+
+    "gulp": "~3.5.0",
+    "gulp-load-plugins": "~0.3.0",
+    "gulp-util": "~2.2.9",
+    "gulp-connect": "~1.0.7",
+
+    "gulp-autoprefixer": "~0.0.6",
+    "gulp-jshint": "~1.4.0",
+    "gulp-imagemin": "~0.1.5",
+    "gulp-clean": "~0.2.4",
+    "gulp-cache": "~0.1.1",
+    "gulp-size": "~0.1.2",
+    "gulp-useref": "~0.1.2",
+    "gulp-bundle": "~0.2.0",
+
     "grunt": "~0.4.1",
     "grunt-contrib-copy": "^0.4.1",
     "grunt-contrib-concat": "~0.3.0",
@@ -40,6 +47,6 @@
     "js-yaml": "*"
   },
   "engines": {
-    "node": ">=0.8.0"
+    "node": ">=0.10.0"
   }
 }