虽着我对Gulp的越来越深入,由原来利用很多现成组件(这点多亏npm,几乎你想要的功能都已经有现成的),到现在由于团队越来越大,前后端的分离工作也更清晰,反而Gulp已经成了不可分割工具。我们几乎每个项目都是由npm、brower、gulp来构建的。

当然,刚开始我写的Gulp非常的简单,所以是否调试都是直接依赖 console.log 办法,然而随着团队越来越成熟、项目越来越大,也会变法的去改善Gulp,其目的无非就是让Gulp发挥得更快。

所以开始自己写Node组件来满足构建需求,也成了我工作的一部分。Gulp真的很快,但是如果不善用它会变得很慢。而能否调试Gulp任务,成了影响学习成果的原因,因为只有进入调试我才能看得清楚流程以及更大的优化工作。

Gulp本身就是Node.js,所以我们只需要按照 Node.js 的调试办法来调试我们的 Gulp 任务就行了。

安装 node-inspector

node-inspector 就是node.js的调试工具,而它必须依赖node-gyp,而它又必须先安装python,所以在安装之前必须先安装python。

注:不同平台下它的python版本是有要求

然后安装一个全局的node-inspector。

npm install -g node-inspector

当前安装这家伙未必那么顺利,也许你可能遇到的问题会是:

  • node.js安装版本不符合。
  • 网络问题,正常会收到:Error: connect ETIMEDOUT 的错误。
  • VS Build错误(可能:error msb8020 the build tools for visual studio 2010 (platform toolset = ‘v100’) cannot be found),可以尝试 set GYP_MSVS_VERSION=2013 (假如你的VS是2013的话)

总之安装她会有各种异常,我只能祝你好运。

接着,使用node-debug来调试:

node-debug $(gulp.js文件名) myTask

假设成功的话,会返回:

Node Inspector is now available from http://127.0.0.1:8080/?ws=127.0.0.1:8080&po
rt=5858
Debugging `gulpfile.js`

会自动打开一个Chrome,并进入调试状态。这样的调试如同我们在调试网页的JavaScript脚本一样,诸如:debugger 进入断点,或Chrome的断点,都会被暂停。