这次给大家带来nodejs怎么实现gulp打包功能，nodejs实现gulp打包功能的注意事项有哪些，下面就是实战案例，一起来看一下。
最近换了家新公司，由于是创业公司，项目基本从零开始搭建。工作几年，也没想过写点什么技术性的东西，今天突然心血来潮，哦当然，我这个人总是特别容易心血来潮，不定想干点啥，不说废话了，毕竟上班呢，开小差也不太好。忙了一个月，项目初见雏形，也基本可以1.0上线了，趁着等文案的时间，简单写点gulp打包的东西，等明儿有空再来一篇详细的，再有空再来个webpack的，哎呀，这个有空也不知道是啥时候，莫怪，好像又废话了几句。stop，stop。
从头儿来吧，首先创建一个package.json文件，就npm init一直确认确认确认就好了，构建过程中用到什么就npm什么就好了。做过vue脚手架的小伙伴儿应该知道，脚手架会自动生成一个特别全面的package.json文件，当然我们目前也用不到那么多。不多说了。
为了万一以后添加强大的功能，我们就多做几个文件，就不是仅仅一个gulpfile.js了，当然一个也没问题。
来创建一个gulpfile.config.js来专门放置文件路径引用输出等。就是所谓的src，dist。再来一个gulpfile.xxx.js，名字随便起吧，引用的时候引用对就好了。再来一个gulpfile.js吧，最后要运行啊。
做个最简单例子，以js压缩为例，稍后加上版本哈管理功能，用法都差不多，用什么加什么。
var src_file = './xxxx/'; // 你的源文件目录var dist_file= './dist/xxxx/'; // 文件处理后你想存放的目录var config= {src: src_file,dist: dist_file,js: { src: src_file + 'src/js/**/*.js', // 你的js目录 dist: dist_file + 'src/js', // js文件打包后存放的目录 },};module.exports = config;
登录后复制
这只是个最简单的小例子，要是有其它的往里加就好了，html，css，img，还有一些静态文件等。
关键的来了，我们把处理方法写在gulpfile.xxx.js里面。
gulpfile.xxx.js：
var gulp = require('gulp');var rename = require('gulp-rename'); //重命名var babel = require("gulp-babel");var uglify = require('gulp-uglify'); //js压缩var config = require('./gulpfile.config.js');var runSequence = require('run-sequence');var rev = require('gulp-rev');//版本号管理的一些东西，先写进来吧，懒的在敲了var revCollector = require('gulp-rev-collector');var cssUrl = './dist/xxx/src/css/*.css', jsUrl = './dist/xxx/src/js/*.js';function haha() { gulp.task('js', function () { return gulp.src(Config.js.src) .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest(config.js.dist)); }); gulp.task('revJs', function(){ return gulp.src(jsUrl) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('dist/xxx/src/js')); }); gulp.task('revHtml', function () { return gulp.src(['dist/xxx/src/js/**/*.json', 'chaohuo/*.html']) /*后面本地html文件的路径，可自行配置*/ .pipe(revCollector( { replaceReved:true } )) .pipe(gulp.dest('dist/chaohuo')); /*Html更换css、js文件版本,和本地html文件的路径一致*/ }); gulp.task('dev', function (done) { condition = false; runSequence( ['revJs'], ['revHtml'], done);}); gulp.task('default', ['js','dev']);}module.exports = haha;
登录后复制
天啊，我本来想一步步来写清楚点的，没想到一下子把版本号相关的也都写进去了，那就算了吧，一起来吧。
下面是gulpfile.js文件：
var haha= require('./gulpfile.prod.js');haha();
登录后复制
基本工作已经完成一大半了，还有一个忘记说了。如果你用到了es6语法，千万别忘记配置一个.babelrc文件.
.babelrc内容：
"presets": [ "es2015", ], "plugins": [ "transform-remove-strict-mode"//这个插件就是添加版本号的关键。 ]}
登录后复制
有的小伙伴可能会遇到版本号不断叠加的问题，还记得{ replaceReved:true }这个吗，前面有看一下，记得添加这个。还有最后一步node_modules我们要更改一些代码，来吧，我下的最新的包（如果你用的老的，也是差不多的改法），替换下。
gulp-path里的index.js两个return的东西都改掉：
return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);改为return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext);改为return modifyFilename(pth, (filename, ext) => filename + ext);
登录后复制
gulp-rev-collector里的index.js：
大概128行左右
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) )+ path.basename(key, path.extname(key)).split('.').map(function(part){return escPathPattern(part) + '(' + opts.revSuffix + ')?';}).join('\.')+ patternExt);
登录后复制
这段改为
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) ) + opts.revSuffix + escPathPattern( path.extname(key) ) + "(\?v=(\d|[a-z]){8,10})*" );
登录后复制
这里相关的也是网上查了很多相关的资料，不过好像都是一些老版本，并且gulp-rev里的文件不用修改，这里也经过多次测试，以上基本可用。
好了，离成功不远了，cmd运行下gulp命令，ok，基本完成，可以去查看下啦！
注意：所有require的东西记得npm安装哦，卡的话就cnpm，不多说。
还有由于很多东西都是手打的，可能会有部分拼写呀，文件路径的错误，记得检查更改哦。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
以上就是nodejs怎么实现gulp打包功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772475.html
