Gulp4.0入门和实战

依赖——软件工程师的痛

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
  1. 安装gulp
npm install gulp -D --save
  1. 创建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文件的处理,如下:

Redis 实战 —— 02. Redis 简单实践 – 文章投票

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更为常用。

机器学习6-回归改进

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

hive窗口函数/分析函数详细剖析

2021-1-21 21:31:00

经验教程

依赖——软件工程师的痛

2021-1-21 21:59:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索