1、文件合并压缩

  var concat = require(‘gulp-concat’); //引用

  var uglify = require(‘gulp-uglify’); 
  接下来,只要concat(‘xxx.js’)就算合并了。注意此时只是在内存中生成

  前面我们学过管道的概念,因此代码整合非常简单 
  gulp.src([这里写上js]).pipe(concat(‘xxx.js’)).pipe(uglify()).pipe(gulp.dest(‘目录’))

2、gulp-useref进行资源合并

  文件配置:通过插入特定的标签,用于标示gulp-useref要处理的资源

 

gulp脚本:

tip

通常,我们希望资源进行合并输出后,删除掉合并前的js和css,避免接下来进行其他处理时,要手动再写脚本排除掉它们。 
所以,需求是使用gulp-useref合并资源输出并删除合并前的文件。 
查看源码和参照官方配置,惊喜发现,改下gulp脚本就可以达到目的:

If you want to minify your assets or perform some other modification, you can use gulp-if to conditionally handle specific types of assets.

Blocks are expressed as:

gulp合并压缩的更多相关文章

  1. 关于用gulp合并压缩seaJs模块

    现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享 ...

  2. 使用gulp 合并压缩打包,实时监控文件,实现本地server

    今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gu ...

  3. 介绍一种基于gulp对seajs的模块做合并压缩的方式

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...

  4. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  5. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

  6. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  7. gulp css 压缩 合并

    //导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...

  8. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  9. ASP.NET MVC Bundle使用 合并压缩

    2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...

随机推荐

  1. [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  2. 利用css3制作毛玻璃的效果

    忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻 ...

  3. OTSU算法学习 OTSU公式证明

    OTSU算法学习   OTSU公式证明 1 otsu的公式如下,如果当前阈值为t, w0 前景点所占比例 w1 = 1- w0 背景点所占比例 u0 = 前景灰度均值 u1 = 背景灰度均值 u = ...

  4. eventbus3-intellij-plugin插件搜不到

    一.eventbus3-intellij-plugin插件搜不到

  5. 如何从 GitHub 上下载单个文件夹

    DownGit 好用记得回来点赞(建议***)

  6. Android ListView无数据项时提示

    只需要调用在代码中调用setEmptyView(View emptyView)设置ListView为空时显示这个TextView即可. 布局文件 <?xml version="1.0& ...

  7. 你写的什么垃圾代码让Vsync命令不能及时处理呢?(1)

    想想自己写的什么垃圾代码导致Vsync不能及时处理#(不高兴) 想不开? 实际开发中性能问题不好复现?这你就可能需要一些工具来帮你检测这种情况. 首先是Android系统自带的工具(4.1之后的版本) ...

  8. react实例:理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  9. Android组件系列----当前Activity跳转到另一个Activity的详细过程

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  10. leetCode题解之寻找插入位置

    1.问题描述 Search Insert Position Given a sorted array and a target value, return the index if the targe ...