nodejs实现简单的gulp打包


Posted in NodeJs onDecember 21, 2017

最近换了家新公司,由于是创业公司,项目基本从零开始搭建。工作几年,也没想过写点什么技术性的东西,今天突然心血来潮,哦当然,我这个人总是特别容易心血来潮,不定想干点啥,不说废话了,毕竟上班呢,开小差也不太好。忙了一个月,项目初见雏形,也基本可以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 相关文章推荐
nodejs的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
NodeJS url验证(url-valid)的使用方法
Nov 18 NodeJs
nodejs中实现路由功能
Dec 29 NodeJs
Nodejs关于gzip/deflate压缩详解
Mar 04 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 NodeJs
nodejs基础之buffer缓冲区用法分析
Dec 26 NodeJs
在nodejs中创建child process的方法
Jan 26 NodeJs
nodejs调取微信收货地址的方法
Dec 20 #NodeJs
基于nodejs实现微信支付功能
Dec 20 #NodeJs
nodeJS微信分享
Dec 20 #NodeJs
NodeJS爬虫实例之糗事百科
Dec 14 #NodeJs
nodejs实现爬取网站图片功能
Dec 14 #NodeJs
NodeJs form-data格式传输文件的方法
Dec 13 #NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 #NodeJs
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
Python对excel文档的操作方法详解
2018/12/10 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python中qutip用法示例详解
2020/10/02 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
小学门卫岗位职责
2013/12/17 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
个人求职信范文分享
2014/01/31 职场文书
运动会稿件50字
2014/02/17 职场文书
银行奉献演讲稿
2014/09/16 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python