gulp生成source Map

source Map

简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。

下面我们来通过gulp生成我们的map文件

1.首先,全局安装gulp

cnpm install gulp -g

2.安装到项目目录

cnpm install gulp --save-dev

3.安装js压缩模块

cnpm install gulp-uglify --save-dev

4.安装sgulp-sourcemaps

cnpm install gulp-sourcemaps --save-dev

5.本地创建gulpfile.js文件,并配置

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('jsmin', function() {
  gulp.src('private/*.js')//准备要压缩的js
    .pipe(sourcemaps.init())
    .pipe(uglify())//压缩sj
    .pipe(sourcemaps.write('../maps'))//输出map文件
    .pipe(gulp.dest('dist'));//输出压缩后的js文件,默认最后会带有map文件的路径
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,524评论 1 32
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,215评论 7 55
  • -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...
    慢清尘阅读 3,597评论 7 16
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,410评论 1 11
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,101评论 0 8