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

shanghaipc

　　最近一段时间一直在做桌面混合应用，跟以往做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
　　这里存在两个问题：

• 为什么要装两次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命令。
  
  
• 为什么使用--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？据我实验下来，这边过滤的只能是文件而不是一个路径，如果你只写路径，是没有效果的，必须匹配到该路径下的所有文件。