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. AGC008E:Next or Nextnext

    传送门 考虑转化成图论问题,\(i\) 向 \(p_i\) 连边,那么合法方案一定是形成了若干个简单环或自环 考虑一个环内的情况: 如果 \(a_i=p_i\),那么 \(i\) 向 \(a_i\) ...

  2. Spring Boot—09通过Form提交的映射

    package com.sample.smartmap.controller; import org.springframework.beans.factory.annotation.Autowire ...

  3. 地图经纬度坐标与屏幕坐标的转换(android版)

    我们在开发GIS系统的时候,首先要解决的就是地图的可视化问题,这个问题的关键就在于如何把地图的坐标转换成屏幕坐标,然后才到渲染着色.标注等.以下以wgs84经纬度坐标为基准,介绍一下地图经纬度坐标与屏 ...

  4. 如何发挥ERP系统中的财务监控职能?

    ERP系统的管理理念与特点 ERP,是整合了企业管理理念.业务流程.基础数据.人力物力.计算机硬件和软件于一体的企业资源管理系统.ERP系统运用信息技术将企业的资金流.物资流.信息流进行有效的集成,使 ...

  5. redis订阅与发布(把redis作为消息中间件)

    订阅频道127.0.0.1:6379> subscribe chat1Reading messages... (press Ctrl-C to quit)1) "subscribe&q ...

  6. ReactJS表单handleChange

    handleInputChange = (event) => { const target = event.target; const type = target.type; const val ...

  7. Jmeter入门--工具组成和线程组

    1.Jmeter工具组成部分: 资源生成器:用于生成测试过程中服务器,负载机的资源代码.(LoadRunner中的VuGen) 用户运行器:通常是一个脚本运行引擎,根据脚本要求模拟指定的用户行为.(L ...

  8. 转:C# WinForm窗体及其控件的自适应

    一.说明 2012-11-30 曾经写过 <C# WinForm窗体及其控件自适应各种屏幕分辨率>  ,其中也讲解了控件自适应的原理.近期有网友说,装在panel里面的控件,没有效果? 这 ...

  9. ARC下的block导致的循环引用问题解析

    ARC下的block导致的循环引用问题解析 更详细细节请参考 http://blog.sina.com.cn/s/blog_8c87ba3b0101m599.html ARC下,copy到堆上的blo ...

  10. [UI] 精美UI界面欣赏[9]

    精美UI界面欣赏[9]