Gulp - 学习/实践

Myth丶恋晨 2022-12-08 05:20 155阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 了解学习前端项目开发中用到的前端模块管理器之一 Gulp，并且利用其进行前端项目的开发与维护. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1介绍 <a href="https://blog.csdn.net/william_n/article/details/108487342" rel="nofollow">https://blog.csdn.net/william_n/article/details/108487342</a> 简单说：前端模块管理器。目前前端工程化处于混乱之中，但是未来一定会被一种前端模块管理器工具统一。 &nbsp; 2.文档参考 <a href="https://www.gulpjs.com.cn/docs/getting-started/quick-start/" rel="nofollow">https://www.gulpjs.com.cn/docs/getting-started/quick-start/</a>&nbsp; //中文网 -&nbsp;&nbsp;快速入门 &nbsp; 3.实践 环境： <img alt="" height="460" src="https://img-blog.csdnimg.cn/20200918121257628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="535"> &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.在原有项目中执行gulp命令，出现错误提示： gulp siva-css[25644]: c:\ws\src\node_contextify.cc:649: Assertion `args[1]-&gt;IsString()' failed. <img alt="" height="142" src="https://img-blog.csdnimg.cn/20200918120540862.png" width="809"> 原因：上下版本不兼容语法导致. 解决办法： 方式一：降低node版本. 暂时省略. 方式二：安装组件去解决. TBD 安装node.js的原生javascript模块&nbsp;natives 可以解决 执行： npm install natives&nbsp; <img alt="" height="157" src="https://img-blog.csdnimg.cn/20200918120752377.png" width="978"> 可以看到又警告，暂时不管，重试执行gulp siva-css 再次出现错误, 如下： <img alt="" height="241" src="https://img-blog.csdnimg.cn/20200918121412358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="800"> 原因与解决办法：<a href="https://timonweb.com/javascript/how-to-fix-referenceerror-primordials-is-not-defined-error/" rel="nofollow">https://timonweb.com/javascript/how-to-fix-referenceerror-primordials-is-not-defined-error/</a> 简述解决步骤： 因为你的gulp版本v3，node版本v12。 解决方法： - 将gulp版本升级到v4。 - 将node版本降级到v11。 - 将graceful-fs升级到在node v12+下工作的版本4.2.2(推荐)。 推荐解决办法： 1. 在package.json同级目录下新建文件npm-shrinkwrap.json，输入以下内容： { "dependencies": { "graceful-fs": { "version": "4.2.2" } } } 2. npm install 如下： <img alt="" height="246" src="https://img-blog.csdnimg.cn/20200918121825354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="888"> 很尬的是： 命令执行错误 这里应该是gulp css-siva, 然后看到问题已经解决. &nbsp;<img alt="" height="195" src="https://img-blog.csdnimg.cn/20200918121916795.png" width="658"> </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td><a href="https://www.gulpjs.com.cn/docs/getting-started/quick-start/" rel="nofollow">https://www.gulpjs.com.cn/docs/getting-started/quick-start/</a>&nbsp; //中文网 -&nbsp;&nbsp;快速入门</td> 
 </tr> 
 </tbody> 
</table>

后续补充

...