gulp使用

gulp需要全局安装和当前目录都安装才能使用gulp命令

安装gulp插件

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

gulp-rev:给每个文件添加版本号,根据文件内容计算hash码,修改文件名,避免客户端缓存问题

gulp-rev-replace:更新index中的引用

gulp-useref:通过注释合并js、css文件

gulp-filter:将stream里的文件根据一定的规则进行筛选过滤

gulp-uglify:压缩js

gulp-csso:压缩css

//声明依赖包
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso')gulp.task("default",function () {//定义过滤规则,!index.html指忽略此文件,index.html不用加版本号var jsFilter = filter('**/*.js',{restore: true});var cssFilter = filter('**/*.css',{restore: true});var indexHtmlFilter = filter(['**/*','!index.html'],{restore: true})return gulp.src('index.html')  //找到index.html文件进行处理.pipe(useref())       //通过useref插件分析index中带有注释的css和js文件,放入流中,此时流中包含index、css、js文件.pipe(jsFilter)       //筛选js文件.pipe(uglify())       //压缩.pipe(jsFilter.restore)    //js文件返回流.pipe(cssFilter)           //筛选css文件.pipe(csso())              //压缩.pipe(cssFilter.restore)   //css文件返回流.pipe(indexHtmlFilter)     //筛选所有文件,排除index.html.pipe(rev())         //生成hash版本号文件名.pipe(indexHtmlFilter.restore) //文件返回流.pipe(revReplace())        //更新index.html中对css、js的引用 .pipe(gulp.dest('dist'));  //将文件流放入dist目录
})

使用/*! ... */的注释不会被压缩,如果你的版权声明不想被压缩可以使用/*! ... */注释。

css注释

<!-- build:css css/combined.css -->
<link>
<!-- endbuild -->

javascript注释

<!-- build:js js/combined.js -->
<script></script>
<!-- endbuild -->

 

转载于:https://www.cnblogs.com/tgxh/p/6322375.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android监听器作用,android - 监听器和接收器(Android)有什么区别?

例如&#xff0c;我需要一个BroadcastReceiver来获取这些事件:重新启动或关机屏幕开或关电池状态(电压&#xff0c;接通电源&#xff0c;温度)物理按钮按下(相机&#xff0c;媒体等)但是我需要监听器来获取以下事件:用于传感器事件(加速度&#xff0c;磁场&#xff0c;方向&…

UML中的6大关系(关联、依赖、聚合、组合、泛化、实现)

UML定义的关系主要有六种&#xff1a;依赖、类属、关联、实现、聚合和组合。这些类间关系的理解和使用是掌握和应用UML的关键&#xff0c;而也就是这几种关系&#xff0c;往往会让初学者迷惑。这里给出这六种主要UML关系的说明和类图描述&#xff0c;一看之下&#xff0c;清晰明…

android 相册 uri空,Android---相册getContentResolver().query结果为空指针

针对小米4手机上测试如下代码&#xff1a;Uri uri data.getData();String[] proj {MediaStore.Images.Media.DATA};//Cursor cursor managedQuery(uri, proj, null, null, null);Cursor cursor getContentResolver().query(uri, proj, null, null, null);cursor.moveToFirs…

用Spark学习FP Tree算法和PrefixSpan算法

在FP Tree算法原理总结和PrefixSpan算法原理总结中&#xff0c;我们对FP Tree和PrefixSpan这两种关联算法的原理做了总结&#xff0c;这里就从实践的角度介绍如何使用这两个算法。由于scikit-learn中没有关联算法的类库&#xff0c;而Spark MLlib有&#xff0c;本文的使用以Spa…

android os n9005,SM-N9005

hkSM-N9005ZKETELSM-N9005{"softwares":[{"description":"SAMSUNG Kies,PC Sync","fileName":"Kies3Setup.exe","fileModifiedDate":"2013年9月11日","fileVersion":"Kies 3.0(13091_39…

性能调优-硬盘方面,操作系统方面,文件系统方面

硬盘对数据库性能的影响 传统机械硬盘 当前大多数数据库使用的都是传统的机械硬盘。机械硬盘的技术目前已非常成熟&#xff0c;在服务器领域一般使用SAS或SATA接口的硬盘。服务器机械硬盘开始向小型化转型&#xff0c;目前已经有大量2.5寸的SAS机械硬盘。 机械硬盘有两个重要的…

chrome Android 80,Chrome OS 80将为Chromebook带来侧载Android应用的支持

如需体验这项功能&#xff0c;需在启动 Crostini 容器时加上一行特殊的命令 —— 从 Chromebook 命令行启动时&#xff0c;请加上 –enable-features ArcAdbSideloading 。最终&#xff0c;我们希望这回成为一项明示的标记(flags)功能。如变更日志所述&#xff0c;用户可通过托…

BZOJ4122 : [Baltic2015]File paths

对于在$o$点的某个询问&#xff0c;有两种情况&#xff1a; 情况1&#xff1a;走到任意一个点$x$然后超链接跳到$o$的某个祖先$y$再走到$o$。 枚举所有$y$看看是否存在$x$即可。 时间复杂度$O(nm)$。 情况2&#xff1a;走到$o$的某个祖先$x$&#xff0c;然后走到$x$子树内某个点…

android 日历仿IOS,基于Android week view仿小米和iphone日历效果

前言最近由于项目需求&#xff0c;要做一个仿小米日历的功能&#xff0c;下面显示一天的日程&#xff0c;header以周为单位进行滑动&#xff0c;github上找了很久也没有找到合适的&#xff0c;但找到一相近的开源项目Android-week-view&#xff0c;它不是我们项目所需要的效果&…

Deque - leetcode 【双端队列】

239. Sliding Window Maximum //大概思路是用双向队列保存数字的下标&#xff0c;遍历整个数组&#xff0c;如果此时队列的首元素是i - k的话&#xff0c;表示此时窗口向右移了一步&#xff0c;则移除队首元素。然后比较队尾元素和将要进来的值&#xff0c;如果小的话就都移除&…

android开源系统brvah,Android Jetpack之通用Adapter(Databinding+BRVAH)

之前发过一个databinding版的通用adapter&#xff0c;能实现一般需求&#xff0c;不过功能比较简陋&#xff0c;实际开发中大家更倾向于使用BRVAH等功能丰富的第三方框架。现在给出一个基于BRVAH的databinding版通用Adapter。BaseAdapterabstract class BaseAdapter(private va…

1、管理员登录中间件和注销

1、根据session去判断用户是否登录&#xff0c;登录后才可以进index首页&#xff0c;否则返回login页面&#xff0c;借助中间件 (1)修改路由 Route::group([middleware > [web,admin.login],prefix>admin,namespace>Admin], function () { //注册一个中间件admin.logi…

HTML阅读打开点击不了,如何让网页文章中的代码可以点击运行

在网页中运行代码HTML5学堂&#xff1a;很多代码网站当中&#xff0c;都会提供运行代码段功能&#xff0c;便于查看代码效果&#xff0c;那么这个是如何实现的呢&#xff1f;一起来看一下——如何在网页中运行代码。HTML5学堂-刘国利said&#xff1a;应该是在2013年的时候&…

angular-cli构建

angular-cli全称Command Line Interface 命令行界面 1使用命令 npm install -g angular-cli 安装angular-cli, 2安装完成后使用cli快速常见一个angular模板, 3ng serve启动项目 4在模板(seed/种子)的基础上进行修改 ############################## 在typescript中引用leanclou…

模仿块级作用域

模仿块级作用域 JavaScript中没有块级作用域&#xff0c;这意为着在块语句中定义的变量&#xff0c;实际上是包含在函数中而非语句中创建的。 下面的这个实例可以看出: function outputNumbers(count){for (var i0; i < count; i){alert(i);}alert(i); //count }outputNum…

html留言回复评论页面模板,HTML5实现留言和回复的页面样式

这篇文章主要介绍了用HTML5如何实现留言和回复样式,需要的朋友可以参考下具体就不做详细讲解了&#xff0c;直接上代码&#xff1a;web开发-webkfa.com*{margin:0;padding:0;-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */-webkit-t…

UVA-714 二分

把可能的进行二分判断&#xff0c;判断的时候尽量向右取&#xff0c;一直取到不能去为止&#xff0c;这样才有可能成功分割。 判断是否可以把up作为最大值的代码&#xff1a; bool judge(LL up){if(up < Big) return false; //Big是数组中最大值&#xff0c;如果up小于最大值…

html5不支持的属性,HTML5 常用语法一览(列举不支持的属性)

HTML头部标记标记描述HTML5标准定义页面中所有链接的基准URL设定显示在浏览器左上方的标题内容表明该文档是一个可用于检索的网关脚本不支持文档本身的元信息,例如查询关键词,有效期等设定CSS层叠样式表内容设定外部资源的链接页面脚本内容元信息标记属性标记描述值HTML5标准ht…

守护线程

/*守护线程&#xff08;后台线程&#xff09;:在一个进程中如果只剩下了守护线程&#xff0c;那么守护线程也会死亡。需求&#xff1a; 模拟QQ下载更新包。一个线程默认都不是守护线程。*/ public class Demo7 extends Thread {public Demo7(String name){super(name);}Overrid…

c 的word转为html5,word与html互转(1) -- word转html

使用忠告使用该方式进行xhtml到word的转换, 简单转换是可以, 但是可能并没有想象中那么满意, 转换出来的word格式并不完美, 比如目录和标题都会丢失, 标题显示看起来一样, 但是是用正文加粗和加大字号来显示的. 毕竟word是一种文档格式, 而html是一种标记性语言, 要想实现完美兼…