gulp插件(8) - gulp-sourcemaps(生成sourcemap)
功能描述
生成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)的更多相关文章
- gulp 插件
原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- gulp插件(gulp-jmbuild),用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
- gulp插件gulp-usemin简单使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...
- gulp插件
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使 ...
- 将less编译成css的gulp插件
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
- gulp插件大全
原文:http://www.mamicode.com/info-detail-517085.html No.1.run-sequence 作用:让gulp任务,可以相互独立,解除任务间的依赖,增强 ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
- gulp插件学习01
1.安装和使用 安装node环境:官网:https://nodejs.org: 命令行输入 npm i gulp -g ,gulp-v查看安装是否成功: 创建项目目录: 进入目录,并在目录中按住shi ...
随机推荐
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- .net开发环境搭建
本地开发环境下载网址:https://msdn.itellyou.cn/,选择个人免费版本 下载工具 下载安装win7系统选择asp.net 和web开发,右侧可选全部选择,大约11GB左右
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- web 学习资源
学习 https://skills.bugbank.cn/ https://github.com/JnuSimba/MiscSecNotes 靶场 http://skysec.top/2018/01/ ...
- ES6高频面试题目整理
本篇文章是根据以下内容进行的总结 1.https://segmentfault.com/a/1190000011344301 2.http://www.bslxx.com/a/mianshiti/ti ...
- Java 8方法引用使用指南
[编者按]本文作者为拥有15年 Java 开发经验的资深程序员 Per-Åke Minborg,主要介绍如何灵活地解析 Java 中的方法引用.文章系国内 ITOM 管理平台 OneAPM 编译呈现. ...
- 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio
本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...
- springMVC入门-05
接着上一讲,介绍如何查询单个数据,此处介绍show()方法的实现.显示单条数据需要使用Users对象中的一个字段作为入参来进行对象查询,将查询出来的数据放在Model中,并且将model中的user对 ...
- [UI] 精美UI界面欣赏[10]
精美UI界面欣赏[10]
- Hybris阶段总结(2)hybris架构
年前总结一下这两个星期在SAP实习学到的一些东西 先上图: 从底往上总结,之后会有个小例子来解释一下 1.Persistence layer 就是作为hybris所连接的数据库这一层,其中hybr ...