在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

posted on 2015-11-20 21:01  Erucy  阅读(...)  评论(...编辑  收藏

导航