在Visual Studio 2015的Cordova项目中使用Gulp

之前一直是在vs 2013中使用Cordova来开发移动app（目前有iPad版/iPhone版/安卓版），准备到下一个milestone的时候升级到2015，这两天在尝试各种东西。

2015中的cordova项目和2013结构变化很大，所以需要一个手动迁移过程，这个过程之前已经有同事尝试过了，包括很多插件可能都要重新安装，不同插件的使用可能还有些不太一样。

这两天在研究如何在项目里使用gulp这个前端集成工具，vs 2015支持这个东西是一个非常大的利好，之前很多事情现在都可以自动来做了。

gulp需要通过npm进行安装，不过2015自带的是npm 2.7.4，这个版本的npm有一个非常头疼的问题：在安装包依赖的时候会一层一层下去，gulp又是一个依赖层级非常多的包，直接导致路径长度超过了windows系统的限制，虽然实际用的时候问题不大，但是从资源管理器里删除和移动就会非常麻烦（不过vs自己在卸载包的时候就没问题）。下面这张图是别人在GitHub的一个issue上截的：

微博上有人提醒我npm 3已经解决了这个问题，可以把所有的依赖包摊平，以下是安装方法：

1. 微软提供了一个windows系统上升级npm的工具（因为会涉及到修改系统环境中的PATH等一系列问题），这个工具也是用npm安装的
2. 以管理员身份打开PowerShell
3. 执行：Set-ExecutionPolicy Unrestricted -Scope CurrentUser –Force
4. 安装：npm install -g npm-windows-upgrade
5. 执行：npm-windows-upgrade
6. 然后会给出一个npm的版本列表供我们选择，最新的好像是3.5.0，但是我去npmjs上看好像是3.4.1？所以最后还是选了3.4.1
7. 装完之后用npm -v确认一下版本

然后……发现在vs里面重新下载npm依赖的时候依然是嵌套的……不解……

不过用命令行的方式下载就好了……

然后发现了一个新问题，gulpfile.js 执行不能:

我用了gulp-sass来预处理css，它依赖于node-sass，node-sass使用了一个用C编写的libsass库，提示没找到指定的库文件。我看了一下node-sass的源代码，可能是因为build的时候和使用的时候生成路径不一致导致的（我这里是在win32-ia32-14目录，貌似是用C14编译器编译的），折腾一会儿无果之后，从GitHub上手动下载了win32-ia32-11版本……放进去就ok了

 

gulp的使用比较简单，安装刚才说过了（其实就是Cordova项目根目录的package.json），然后根据需要选择一些插件，我们会用到的包括gulp-uglify（js最小化）、gulp-sass（预处理css）、gulp-concat（合并文件）。使用的时候在根目录创建一个gulpfile.js，然后就是标准玩儿法，相对比较简单，这里就不多介绍了，有兴趣可以参考gulp文档。

在Visual Studio的视图菜单 – 其他窗口 – 任务运行程序资源管理器 中，可以看到gulp中的任务：

左侧可以看到在gulpfile.js中编写的所有任务，可以右键直接运行，或者右键把它绑定到vs的事件中，比如生成前进行html、js、css处理，在项目打开的时候进行watch（文件修改后可以自动进行css预处理等任务）。

 

我们的产品是一个单页面应用（SPA），里面目前涉及到超过70个页面，没有用angular这样的框架（不过在某些核心功能中使用了knockout），是我自己写的一套简单的（有机会可以分享一下），每个页面对应一个html、一个js，之前css都是写在一起的（现在已经1800多行了……）。2015的Cordova项目所有引用的文件都在www目录中，所以后面打算这么干：

1. 在www目录之外创建一个component_pages目录，每个页面对应一个html + 一个js + 一个scss（可能没有）放到这里面
2. 使用gulp实现如下功能：
   1. 所有非库的js文件（也就是自己写的js文件），进行uglify（如果是debug模式可以跳过这一步），然后复制到www目录对应文件夹下
   2. 所有的html文件直接复制到www目录对应文件夹下
   3. 所有的scss预编译为css后合并成一个css，复制到www目录对应文件夹下……

 

参考：

1. Automate tasks for your Cordova project by using Gulp
2. npm-windows-upgrade