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的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
Sep 26 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
详解nodejs微信公众号开发——3.封装消息响应模块
Apr 10 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs发送http请求时遇到404长时间未响应的解决方法
Dec 10 NodeJs
nodejs实现解析xml字符串为对象的方法示例
Mar 14 NodeJs
nodejs aes 加解密实例
Oct 10 NodeJs
nodejs实现范围请求的实现代码
Oct 12 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python中安装easy_install的方法
2018/11/18 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
机关会计岗位职责
2014/04/08 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server