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. YII 用gii生成modules模块下的mvc

    1.生成model ModelPath设置为: application.modules.[moduleName].models 2.生成CURD ModelClass设置为: application. ...

  2. drupal7 查看哪些模块实现了某个钩子

    module_implements($hook) 可参考函数module_invoke_all function module_invoke_all($hook) { $args = func_get ...

  3. CSS中表示大小的单位

    以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...

  4. 增加图例 Legend和删除图例

    private void button1_Click(object sender, System.EventArgs e) { //Get the GraphicsContainer IGraphic ...

  5. Flutter的教程:ListView

    本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非 ...

  6. Linux pyenv环境安装

    python工作环境管理 pyenv安装: git clone https://github.com/pyenv/pyenv ~/.pyenv echo 'export PYENV_ROOT=&quo ...

  7. css.map作用

    看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到 ...

  8. SQLServer Temp tables 数据疑问

    1. 现象 使用Cacti监控,有关于临时表的一个图形 可以看到正在使用的临时表Active Temp Tables的数量非常大,并且在非工作时间,也维持在400个左右.感觉非常奇怪,所以追查下! 2 ...

  9. poj2182 逆推暴力

    题意 告诉有n头牛,每头牛有一个编号1~n,再一次烂醉之后,奶牛们没有按照编号排队:告诉你对于第i头奶牛,在它之前有多少头奶牛比它的编号小(i>1,因为第1头奶牛的数据永远为0,故题中省略),求 ...

  10. springMVC入门-04

    这一讲介绍springMVC使用rest风格添加数据的实现.在之前的一讲中添加一个链接跳转到add.jsp页面,对应代码如下所示: <%@ page language="java&qu ...