使用gulp在开发过程当中合理导出zip文件

最近一段时间一直在作桌面混合应用，跟以往作web端不一样的是，没法再经过在浏览器上输入内部的域名来随时跟踪开发版本的情况了，只能经过打包代码让产品或领导随时跟踪进度。

 

这里就涉及到一些问题了：

 

1，须要打包成zip文件便于传输

2，须要排除一些仅是开发中须要的文件，如node_modules，一些没必要要的config等

 

而后，首当其冲gulp，关于gulp和grunt的比较，流式（stream）操做比较快之类的云云就很少废话了。

 

一，生成zip文件

使用gulp-zip插件

首先是安装

npm install gulp -g
npm install gulp gulp-zip --save-dev

这里存在两个问题：

1. 为何要装两次gulp，一次全局一次本地？全局安装是为了随时随地能够在命令行中使用gulp，命令行并不认识local安装的gulp命令，本地安装是为了维护你当前的项目所依赖的gulp版本，且本地运行更快，固然若是你实在不爽两地安装或者到发布环境再去全局安装gulp显得不少余，你固然能够这样作，在项目根目录下的package.json中这样写：

   {
       ...//此处省略100行
       "main": "src/js/index.js",
       "scripts": {
           "zip": "gulp zip"
       },
       ...//此处省略100行
   }    

   如此就能够不用全局安装gulp了，由于npm-script会自动到local的node_modules目录中查找到gulp命令。

2. 为何使用--save-dev而不用--save？是由于该插件仅为开发所依赖，不为使用所依赖，说白了就是只有开发者才须要用这个插件，使用者是不须要的，因此使用--save-dev。

 

安装完了以后，就开始编写gulpfile.js（若是要使用es6语法，需更名为gulpfile.babel.js，并需安装babel，题外话，不展开）：

const gulp = require('gulp');
const zip = require('gulp-zip');
 
gulp.task('zip', function() {
    return gulp.src('**/*.*')
        .pipe(zip('test.zip'))
        .pipe(gulp.dest('export'));
});

gulp的使用问题不在这里赘述。而后就能够在根目录下运行

gulp zip

或使用npm-script方式

npm run zip

而后就在export/下能看到你导出的test.zip文件，里面包含了根目录下的全部文件。

 

二，排除某些不须要的目录和文件

一些常见的须要排除的目录有node_modules，本地config等，gulp.src提供了强大的路径匹配，咱们都知道src能接受数组来作多个匹配。

一开始你可能会这样写：

gulp.src(['!**/node_modules/**/*.*'，'!config/**/*.*']）

而后就出错了：Error: Missing positive glob

原来反匹配在gulp.src中是不能够写在第一位的，第一项必定是正匹配，因而这样写：

gulp.src(['**/*.*','!**/node_modules/**/*.*'，'!config/**/*.*']）

一切大吉了，压缩出来的文件不包含这些文件夹里的东西了。也许你要问，就排除个文件夹，为何不能直接写**/node_modules？据我实验下来，这边过滤的只能是文件而不是一个路径，若是你只写路径，是没有效果的，必须匹配到该路径下的全部文件。