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 ...
随机推荐
- spring-boot-starter-actuator不起作用
spring-boot-starter-actuator的作用,actuator是监控系统健康情况的工具.使用这个功能首先要先添加依赖,如下.<!-- 监控和管理生产环境--><de ...
- mybatis作用、基本使用、小结
1. MyBatis 1.1. 作用 MyBatis是持久层框架,它是支持JDBC的!简化了持久层开发! 使用MyBatis时,只需要通过接口指定数据操作的抽象方法,然后配置与之关联的SQL语句,即可 ...
- drupal7 带表达式条件的update
原本的mysql语句是这样的: ; 转化成drupal的api是这样的 $total_amount=1; $rows= db_update('my_payment_card') ->expres ...
- 原型相关的方法isPrototypeOf、Object.getPrototypeOf、hasOwnProperty、Object.getOwnPropertyName、Object.keys
在看<高程3>第六章的<面向对象的程序设计>的原型那一节时,有一下5个函数,功能较为接近,但是又都很基础,很重要 所以在此,加以说明,以便日后复习 function Perso ...
- 项目maven update 后启动项目出现导常:org.springframework.web.context.ContextLoaderListener
导常:org.springframework.web.context.ContextLoaderListener 1. 右键单击工程项目 ->点击 properties2. 选择 Deploym ...
- 你写的什么垃圾代码让Vsync命令不能及时处理呢?(2)
接上篇 1.TraceView Traceview看起来复杂,其实很简单: 上部分图中,X代表时间消耗,Y轴代表各个线程中的方法,且使用了不同颜色表示.面积越款,时间越长. 下部分为分析面板,分析面板 ...
- 一种特殊场景下的HASH JOIN的优化为NEST LOOP.
应用场景: 有如下的SQL: select t.*, t1.ownerfrom t, t1where t.id=t1.id; 表t ,t1的数据量比较大,比如200W行.但是两张表能关联的行数却很少, ...
- leetCode题解之Reshape the Matrix
1.题目描述 2.分析 使用了一个队列. 3.代码 vector<vector<int>> matrixReshape(vector<vector<int>& ...
- log4j配置详解(非常详细)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- how webpack Hot Module Replacement works
https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07