gulp-sourcemaps的用法
1、项目文件夹中,安装gulp-sourcemaps插件
npm install --save gulp-sourcemaps
2、gulpfile.js文件,导入要用到的插件。
如:
// 引入gulp
var gulp = require('gulp');
// 引入gulp-concat插件
var concat = require('gulp-concat');
// 引入gulp-uglify插件
var uglify = require('gulp-uglify');
// 引入gulp-sourcemaps插件
var sourceMap = require('gulp-sourcemaps');
3、gulp-sourcemaps 方法介绍
拿个例子说明
gulp.task('sourcemap',function() {
gulp.src('./src/*.js')
.pipe( sourceMap.init() )
.pipe( concat('all.js') )
.pipe( uglify() )
.pipe( sourceMap.write('../maps/',{addComment: false}) )
.pipe( gulp.dest('./dist/') )
})
1)sourceMap.init( ) 启用sourcemaps功能
2)sourceMap.write( ) 生成记录位置信息的sourcemaps文件
经过 concat 和 uglify ,将生成的all.js 与 源文件( src 下的所有js文件 )之间的位置映射信息,生成sourcemaps文件。
sourceMap.write( ),不传参,将会直接在 all.js 尾部,生成sourcemaps信息。
sourceMap.write( path ),将会在指定的 path,生成独立的sourcemaps信息文件。如果指定的是相对路径,是相对于 all.js 的路径。
无法指定路径为 src 目录,否则,sourcemaps文件会生成在 dist 目录下。
addComment : true / false ; 是控制处理后的文件(本例是 all.js ),尾部是否显示关于sourcemaps信息的注释。
不加这个属性,默认是true。设置为false的话,就是不显示。
注意:sourceMap.init() 和 sourceMap.write() 之间使用的插件,必须支持 gulp-sourcemaps 插件
4、如何在浏览器中,发挥 sourcemaps 的作用?
谷歌浏览器中,打开开发者面板,点击右上角的设置。
下面这两个红框的选项,勾选上。
案例中,2.js中有个bug,和其它 js 文件合并压缩成 all.js 文件。在一个html页面中,只引用这个 all.js。
在浏览器中,打开这个页面,控制台就会直接显示造成bug的源文件,点击即可看到报错位置。
如果没有显示源文件,就刷新下页面,或者,去浏览器的设置中,将那两个选项勾掉,再勾上。
最新文章
- WaitGroup is reused before previous Wait has returned
- struts2项目启动报错。关于jar的问题
- linux 安装一些命令
- python 使用virtualenvrapper虚拟环境管理工具
- lisp中的nil
- ORA-29538、ORA-29532、ORA-29913问题解决
- hiho_1049 二叉树遍历
- 测试web数据库的分布式事务atomikos 的三种数据源 SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSourceBean
- Nah Lock: 一个无锁的内存分配器
- TypedArray和obtainStyledAttributes使用
- Java基础知识强化51:经典排序之桶排序(BucketSort)
- 带格式分离两个RichEditControl的文本
- git出错
- 谈谈线程同步Lock和unLock
- wordpress | WP Mail SMTP使用QQ邮箱发布失败的解决办法
- css 调转180度:transform: rotate(180deg);
- Java之修改文件内容:字符串逐行替换
- MySql Delete不走索引问题
- Mac下Chrome浏览器的手机模拟器,开启模拟定位
- 【poj3415】 Common Substrings