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的子进程(child_process)调用系统命令的方法分享
Jun 05 NodeJs
使用upstart把nodejs应用封装为系统服务实例
Jun 01 NodeJs
Nodejs异步回调的优雅处理方法
Sep 25 NodeJs
浅谈Nodejs观察者模式
Oct 13 NodeJs
使用NodeJs 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
Nodejs进阶:核心模块net入门学习与实例讲解
Nov 21 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
nodejs接入阿里大鱼短信验证码的方法
Jul 10 NodeJs
Nodejs 复制文件/文件夹的方法
Aug 24 NodeJs
nodejs基于express实现文件上传的方法
Mar 19 NodeJs
Nodejs对postgresql基本操作的封装方法
Feb 20 NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 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
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php flv视频时间获取函数
2010/06/29 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
详解Python中的条件判断语句
2015/05/14 Python
python如何通过protobuf实现rpc
2016/03/06 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
资料员岗位职责
2013/11/17 职场文书
20岁生日感言
2014/01/13 职场文书
党员承诺书格式
2014/05/21 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
公司仓库管理制度
2015/08/04 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server