增加 gulpfile 实现测试服务器自动编译部署

Author: 李钿

gulpfile.js

@@ -0,0 +1,32 @@
+var gulp = require('gulp');
+var webpack = require('webpack');
+var clean = require('gulp-clean');
+var gutil = require('gulp-util');
+var ftp = require( 'vinyl-ftp' );
+var deploy = require('./deploy.config.json');
+var deploy_remote_path = "/public/17zt/viewer"
+var webpack_config_demo = require('./webpack.config.example.js');
+// var webpack_config_dist = require('./webpack.config.dist.js');
+
+gulp.task("clean:demo", function(){
+  return gulp.src('./demo', {read: false})
+    .pipe(clean());
+})
+
+gulp.task('build:demo', ['clean:demo'], function(callback) {
+  webpack(webpack_config_demo, function (error,status) {
+    //gulp 异步任务必须明确执行 callback() 否则 gulp 将一直卡住
+    callback()
+  });
+});
+
+gulp.task('deploy:demo', ['build:demo'], function () {
+  deploy.log = gutil.log;
+
+  var conn = ftp.create(deploy);
+
+  return gulp.src('demo/**')
+    .pipe(conn.dest(deploy_remote_path))
+})
+
+gulp.task('demo', ['deploy:demo']);

package.json

@@ -4,7 +4,7 @@
   "description": "Images viewer is a react component use in mobile website App, that function same as Weixin native viewer.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.config.js",    
+    "start": "webpack-dev-server --config webpack.config.js",
     "example": "rm -rf ./demo/* & NODE_ENV=development webpack --config webpack.config.example.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -33,12 +33,16 @@
     "babel-preset-stage-1": "^6.24.1",
     "css-loader": "^0.28.4",
     "file-loader": "^0.11.1",
+    "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
+    "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^2.28.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.4",
     "postcss-loader": "^2.0.5",
     "style-loader": "^0.18.1",
     "url-loader": "^0.5.8",
+    "vinyl-ftp": "^0.6.0",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"
   },