当前位置:Gxlcms > JavaScript > 详解nodejs实现简单的gulp打包

详解nodejs实现简单的gulp打包

时间:2021-07-01 10:21:17 帮助过:6人阅读

本文我们主要和大家分享nodejs实现简单的gulp打包,首先创建一个package.json文件,就npm init一直确认确认确认就好了,构建过程中用到什么就npm什么就好了。做过vue脚手架的小伙伴儿应该知道,脚手架会自动生成一个特别全面的package.json文件,当然我们目前也用不到那么多。为了万一以后添加强大的功能,我们就多做几个文件,就不是仅仅一个gulpfile.js了,当然一个也没问题。

来创建一个gulpfile.config.js来专门放置文件路径引用输出等。就是所谓的src,dist。再来一个gulpfile.xxx.js,名字随便起吧,引用的时候引用对就好了。再来一个gulpfile.js吧,最后要运行啊。

做个最简单例子,以js压缩为例,稍后加上版本哈管理功能,用法都差不多,用什么加什么。


这只是个最简单的小例子,要是有其它的往里加就好了,html,css,img,还有一些静态文件等。

关键的来了,我们把处理方法写在gulpfile.xxx.js里面。

gulpfile.xxx.js:


天啊,我本来想一步步来写清楚点的,没想到一下子把版本号相关的也都写进去了,那就算了吧,一起来吧。

下面是gulpfile.js文件:


基本工作已经完成一大半了,还有一个忘记说了。如果你用到了es6语法,千万别忘记配置一个.babelrc文件.

.babelrc内容:


有的小伙伴可能会遇到版本号不断叠加的问题,还记得{ replaceReved:true }这个吗,前面有看一下,记得添加这个。还有最后一步node_modules我们要更改一些代码,来吧,我下的最新的包(如果你用的老的,也是差不多的改法),替换下。

gulp-path里的index.js两个return的东西都改掉:


gulp-rev-collector里的index.js:

大概128行左右


这段改为


这里相关的也是网上查了很多相关的资料,不过好像都是一些老版本,并且gulp-rev里的文件不用修改,这里也经过多次测试,以上基本可用。

好了,离成功不远了,cmd运行下gulp命令,ok,基本完成,可以去查看下啦!

注意:所有require的东西记得npm安装哦,卡的话就cnpm,不多说。

相关推荐:

vue项目的构建,打包,发布详解

webpack的安装与基本打包用法和命令参数详解

gulp实用配置的介绍与使用

以上就是详解nodejs实现简单的gulp打包的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行