gulp4.0入门和实战

我最近遇到需要优化web的性能的任务,然后就捣鼓了一些对资源文件优化压缩的方案。由于之前的项目中有使用到gulp,所以在需要处理的web项目中也优先使用这个技术。

先聊聊gulp是什么?

gulp被称为基于流的自动化构建工具,也是用NodeJS编写的额。使用NodeJs对文件流的异步处理,可以对资源文件(js和css以及图片)进行优化处理,包括文件的合并和文件内容的压缩。最重要的是,这些工作都是自动化的,只要我们编写好gulpfile.js文件即可!

相较于webpack, gulp也更简单,更基于面向过程的编程,适合需求简单的打包压缩工作。

最新版本的gulp是4.x,和之前的3.x的gulp有所不同,把cli分离出去了,所以需要单独安装gulp-cli。

在项目中使用gulp就简单三步:

  • *1**. 安装gulp-cli
npm install gulp-cli -save

** 2**. 安装gulp

npm install gulp -D --save
  • *3**. 创建gulpfile.js

这第三步是和业务有关的,比如我想对一些css和js文件进行优化,那么需要引入gulp和需要的plugin,代码如下。

// 引入gulp对象和插件
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat');

然后封装两个方法,分别处理css文件和js文件。首先是针对css文件的处理,如下:

function dealCss() {
return src([
'./myapp/static/css/mobile.css',
'./myapp/static/css/all.css',
'./myapp/static/css/tablet.css',
'./myapp/static/css/wag.css'
]).pipe(concat('base.min.css')) // 合并成指定文件
.pipe(cssMin()) // 压缩
.pipe(dest('./myapp/css')); // 设置输出路径

上面的代码就把mobile.css、all.css和tablet.css以及wag.css合并成一个文件base.min.css,并做了压缩优化(minize)。

在编写一个js文件的处理,如下:

function dealJs() {
return src([
'./myapp/js/image.js',
'./myapp/js/bar.js',
'./myapp/js/search.js',
'./myapp/js/tiny-images.js'
]).pipe(concat('imagepage.min.js'))
.pipe(uglify({ mangle : false }))
.pipe(dest('./myapp/pure/js/'));
}

最后就是把这两个定义的方法(在gulp来看就是需要被回调的任务)放置到任务队列里面,有两种选择,一种是使用并行的方式执行,一种是使用同步的方法执行,也就是一个任务执行完再按照顺序执行下一个任务。

这里我们不缺时间,就顺序执行即可:

exports.default =series(dealCss, dealJs);

完整的代码如下所示:

// 引入gulp对象和插件
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat'); function dealCss() {
return src([
'./myapp/static/css/mobile.css',
'./myapp/static/css/all.css',
'./myapp/static/css/tablet.css',
'./myapp/static/css/wag.css'
]).pipe(concat('base.min.css')) // 合并成指定文件
.pipe(cssMin()) // 压缩
.pipe(dest('./myapp/css')); // 设置输出路径 function dealJs() {
return src([
'./myapp/js/image.js',
'./myapp/js/bar.js',
'./myapp/js/search.js',
'./myapp/js/tiny-images.js'
]).pipe(concat('imagepage.min.js'))
.pipe(uglify({ mangle : false }))
.pipe(dest('./myapp/pure/js/'));
} exports.default = series(dealCss, dealJs);

执行gulp命令就可以自动完成上面两个任务,gulp真的很高效!

还可以选择并行的执行多个任务,只需要把最后一行代码改为:

exports.default = parallel(dealCss, dealJs);

parallel()可以让多个任务被并行执行,一个任务发生错误,其他任务不受影响。而series必行安顺序执行,所以一旦有报错,后面的任务就不会被执行。通常如果有报错,我们肯定需要解决它,所以在日常优化资源的场景下选择series更为常用。

Gulp4.0入门和实战的更多相关文章

  1. TensorFlow 2.0 入门教程实战案例

    中文文档 TensorFlow 2 / 2.0 中文文档 知乎专栏 欢迎关注知乎专栏 https://zhuanlan.zhihu.com/geektutu 一.实战教程之强化学习 TensorFlo ...

  2. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  4. CMake快速入门教程-实战

    http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/ http://blog.csdn.net/dbzhang800/article/detai ...

  5. SignalR 2.0 入门与提高

    SignalR 2.0 入门与提高 SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP ...

  6. Sping Boot入门到实战之入门篇(三):Spring Boot属性配置

    该篇为Sping Boot入门到实战系列入门篇的第三篇.介绍Spring Boot的属性配置.   传统的Spring Web应用自定义属性一般是通过添加一个demo.properties配置文件(文 ...

  7. Sping Boot入门到实战之入门篇(二):第一个Spring Boot应用

    该篇为Spring Boot入门到实战系列入门篇的第二篇.介绍创建Spring Boot应用的几种方法. Spring Boot应用可以通过如下三种方法创建: 通过 https://start.spr ...

  8. Sping Boot入门到实战之实战篇(一):实现自定义Spring Boot Starter——阿里云消息队列服务Starter

    在 Sping Boot入门到实战之入门篇(四):Spring Boot自动化配置 这篇中,我们知道Spring Boot自动化配置的实现,主要由如下几部分完成: @EnableAutoConfigu ...

  9. Apache Atlas元数据管理从入门到实战(1)

    一.前言   元数据管理是数据治理非常重要的一个方向,元数据的一致性,可追溯性,是实现数据治理非常重要的一个环节.传统数据情况下,有过多种相对成熟的元数据管理工具,而大数据时代,基于hadoop,最为 ...

随机推荐

  1. Hadoop核心-HDFS

    上一篇我们熟悉了hadoop,本篇讲解一下hadoop第一个核心HDFS. 一.概述 HDFS是一个分布式文件存储系统,以流式数据访问模式存储超大文件,将数据分块存储到一个商业硬件集群内的不同机器上, ...

  2. 关于AES-CBC模式字节翻转攻击(python3)

    # coding:utf-8 from Crypto.Cipher import AES import base64 def encrypt(iv, plaintext): if len(plaint ...

  3. 第一章: 初始JVM

    跟很多人一样,我一开始接触 Java 虚拟机只是因为面试需要用到,所以硬着头皮看看.所以很多人对于为什么要学虚拟机这个问题,他们的答案都是:因为面试. 因为装逼 但我经过了几年的学习和实战,我发现其实 ...

  4. redis源码学习之lua执行原理

    聊聊redis执行lua原理 从一次面试场景说起   "看你简历上写的精通redis" "额,还可以啦" "那你说说redis执行lua脚本的原理&q ...

  5. 浅析Linux 64位系统虚拟地址和物理地址的映射及验证方法

    虚拟内存 先简单介绍一下操作系统中为什么会有虚拟地址和物理地址的区别.因为Linux中有进程的概念,那么每个进程都有自己的独立的地址空间. 现在的操作系统都是64bit的,也就是说如果在用户态的进程中 ...

  6. Core3.0中Swagger使用JWT

    前言 学习ASP.NETCore,原链接 https://www.cnblogs.com/laozhang-is-phi/p/9511869.html 原教程是Core2.2,后期也升级到了Core3 ...

  7. Java 8 新特性 - Lambda表达式

    Lambda表达式 vs 匿名类既然lambda表达式即将正式取代Java代码中的匿名内部类,那么有必要对二者做一个比较分析.一个关键的不同点就是关键字 this.匿名类的 this 关键字指向匿名类 ...

  8. 在 easyui中获取form表单中所有提交的数据 拼接到table列表中

    form表单===== <!-- 并用药品填写信息弹框 --> <div id="usingProdctMsgDiv" style="display: ...

  9. 白嫖JetBrains正版全家桶!

    使用自己的开源项目,是可以白嫖JetBrains正版全家桶的! 前言 之前在学Go的时候,想着要用什么编辑器,网上的大佬都讲,想省事直接用Goland,用VsCode配置会存在一些未知的使用体验问题, ...

  10. VS2015配置环境支持opencv3库(网络方法总结)

    今天安装了opencv3.4.1的版本,之前一直是在ubuntu上做的,本次在windows10上使用VS2015来开发. VS2015是之前安装的,能正常的编译程序. 1. 安装opencv,下载o ...