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

插件安装
$ cnpm install gulp-sourcemaps --save-dev
1
使用方法
例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)
});

gulp插件(8) - gulp-sourcemaps(生成sourcemap)的更多相关文章

  1. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  4. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  5. gulp插件

    gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使 ...

  6. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  7. gulp插件大全

    原文:http://www.mamicode.com/info-detail-517085.html No.1.run-sequence   作用:让gulp任务,可以相互独立,解除任务间的依赖,增强 ...

  8. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

  9. gulp插件学习01

    1.安装和使用 安装node环境:官网:https://nodejs.org: 命令行输入 npm i gulp -g ,gulp-v查看安装是否成功: 创建项目目录: 进入目录,并在目录中按住shi ...

随机推荐

  1. vue-router 实现导航守卫(路由卫士)

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  2. jQuery 四舍五入

    var a="15.23456789"; var b=a.toFixed(2);/*保留两位小数*/ alert(b); /*返回结果:15.23*/

  3. R下载package的一些小问题

    1.Error in install.packages : unable to create ‘C:/Users/???/Documents/R/win-library\3.5 采用管理员身份运行,先 ...

  4. JavaScript 常见面试题

    此文内容多为 JavaScript 对数组理解及运用. 1.如何消除一个数组里面重复的元素? var arr = [1, 2, 3, 3, 4, 4, 5, 5, 6, 1]; var newArr ...

  5. 当div元素内的内容超出其宽度时,自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

  6. 浏览器根对象document之字符串属性

    1.1 停止使用的属性 fgColor.linkColor.vlinkColor.alinkColor.bgColor. 1.2 文档地址 document.URL 与documentURI属性返回同 ...

  7. C# Visual 快捷键

      编辑系 代码提示 Ctrl + J激活VS默认代码提示功能.ReSharper等插件会建议你修改快捷键. 导入命名空间 个人认为Ctrl + .是最方便的,复杂点的是Alt + Shift + F ...

  8. 游戏攻略 Re:LieF ~親愛なるあなたへ~ (relief给挚爱的你)

    箒木 日向子 反対(賛成) ◆セーブ01 図書館へ向かう ◆セーブ02 日向子 食べてあげない もちろん.おいしかったよ コミュニケーション  (汉化版显示为:交流) 日向子END ※回想2個目に追加 ...

  9. Ionic step by step (1)

    刚接触 ionic,一步一步学习,有错误的,望大家指出. 公式 Ionic = Cordova + Angular2 + ionic CSS Cordova: 提供了使用 JavaScript 调用 ...

  10. LeetCode题解之Multiply Strings

    1.题目描述 2.问题分析 按照手算乘法的过程进行计算,首先计算乘法,然后计算加法. 3.代码 string multiply(string num1, string num2) { string s ...