采用gulp实现 前端自动化部署

1.  

   (1)全局安装 gulp 和 gulp-sftp：
   $ cnpm install --global gulp
   & cnpm install --global gulp-sftp
    
   (2)作为项目的开发依赖（devDependencies）安装：
   $ cnpm install --save-dev gulp
   $ cnpm install --save-dev gulp-sftp

    

2. gulpfile.js文件  

   const gulp = require('gulp');
   const ftp = require('gulp-sftp');
    
   // 是上传地址配置，可以在.gitignore中忽略此文件上传，为了安全本地拥有就可以了
   const gulpConfig = require('./gulp-config.js');
    
   /**
    * 编译代码，自动部署到服务器
    */
   gulp.task('upload', function (callback) {
       console.log('## 正在部署到服务器上')
       gulp.src('.' + gulpConfig.publicPath + '**')
           .pipe(ftp(Object.assign(gulpConfig.devDist, {callback})))
   });
   

    
3. gulp-config.js文件

   module.exports = {
       //部署正式服务器上
       devDist: {
           //部署到服务器的路径
           remotePath: '/usr/local/apache-tomcat-7.0.52/webapps/dist',
           //ip地址
           host: '111.14.184.345',
           //帐号
           user: 'root',
           //密码
           pass: 'xxxxxx',
           //端口
           port: 22
       },
       //程序编译好路径
       publicPath: '/dist/'
   }
   

    
4. 项目框架图： 
5.  在使用“npm run build” 编译之后，主目录生成一个编译后文件夹“dist”，然后再运行"gulp upload"，上传到服务器。第一次上传正常，第二次上传已经有的文件夹会报错，不过不会影响，里面的文件肯定会更新的。

 

6. 

1. 然后再浏览器中访问：http:// {{服务器的IP}}:{{端口}}/dist/views/home/home.html

转载于:https://my.oschina.net/u/2439344/blog/1935367