gulp插件(8) - gulp-sourcemaps(生成sourcemap)

原文来自:https://www.jianshu.com/p/e66395f40f3f
<pre>

功能描述

生成sourcemap文件(什么是sourcemap?请参考,简单讲就是文件压缩后不利于查看与调试,但是有了sourcemap,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码)


插件安装

$ cnpm install gulp-sourcemaps --save-dev

使用方法

例1:生成JS文件的sourcemap

var gulp        = require('gulp'),
    uglify      = require('gulp-uglify'),
    concat      = require('gulp-concat'),
    sourcemaps  = require('gulp-sourcemaps')
    pump        = require('pump');

gulp.task('jsmin', function(cb) {
    pump([
        gulp.src('src/js/*.js'),
        sourcemaps.init(),
        concat('demo.js'),
        uglify(),
        sourcemaps.write('.'),
        gulp.dest('dist/js')
    ], cb)
});

例2:生成CSS文件的sourcemap

var gulp        = require('gulp'),
    minifyCss   = require('gulp-clean-css'),
    concat      = require('gulp-concat'),
    sourcemaps  = require('gulp-sourcemaps')
    pump        = require('pump');

gulp.task('jsmin', function(cb) {
    pump([
        gulp.src('src/css/*.css'),
        sourcemaps.init(),
        concat('demo.css'),
        minifyCss(),
        sourcemaps.write('.'),
        gulp.dest('dist/js')
    ], cb)
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,008评论 25 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,647评论 8 183
  • 编译 gulp-sass - 通过 libsass将Sass编译成 CSS gulp-ruby-sass - 通过...
    神秘者007阅读 4,445评论 0 13
  • 1.如果竟然可以用钱换来注意力,一定要好好捞一笔。生活中有哪些用钱换注意力的好事情? 2.在工具上省的钱,就会变成...
    洛尓阅读 212评论 0 0
  • 花开不见叶来赏,叶启未能衬花艳。 花叶固欲相连理,奈何缘尽不得遇。 有情使得同根生,无缘落得面难圆。 识也思也非恋...
    冬丿寒宿命阅读 740评论 0 2

友情链接更多精彩内容