功能描述
生成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. Fastify 系列教程二 (中间件、钩子函数和装饰器)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  2. [转]关于浏览器css选择器性能优化

    作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...

  3. 【代码笔记】iOS-获取现在的日历时间

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  4. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  5. TensorFlow分布式部署【单机多卡】

    让TensorFlow飞一会儿 面对大型的深度神经网络训练工程,训练的时间非常重要.训练的时间长短依赖于计算处理器也就是GPU,然而单个GPU的计算能力有限,利用多个GPU进行分布式部署,同时完成一个 ...

  6. 基于goahead 的固件程序分析

    # 前言 本文由 本人 首发于 先知安全技术社区: https://xz.aliyun.com/u/5274 最近在分析 dlink 的一个固件时遇到了用 goahead 开发的 web 服务.本文以 ...

  7. BlockingQueue介绍及使用

    1.BlockingQueue队列和平常队列一样都可以用来作为存储数据的容器,但有时候在线程当中 涉及到数据存储的时候就会出现问题,而BlockingQueue是空的话,如果一个线程要从Blockin ...

  8. 使用Callable和Future接口创建线程

    具体是创建Callable接口的实现类,并实现clall()方法.并使用FutureTask类来包装Callable实现类的对象,且以此FutureTask对象作为Thread对象的target来创建 ...

  9. mysql 日期时间类型 自动转型 及 运算

    日期时间类型自动转型 -- now().字符串.数字转datetime类型 create table t(dt datetime);insert into t values(now());insert ...

  10. Windows远程桌面Debian配置

    由于xrdp.gnome和unity之间的兼容性问题,在Debian仍然无法使用xrdp登陆gnome或unity的远程桌面,现象是登录后只有黑白点为背景,无图标也无法操作.使用xrdp只能登录xfc ...