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就简单三步:
- 安装gulp-cli
npm install gulp-cli -save
- 安装gulp
npm install gulp -D --save
- 创建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更为常用。
- ASP.NET 4.0 专题实务(I) – 入门实战篇(VB)的「勘误表」
- 前端打包构建工具gulp入门实战
- SSO - CAS 4.0 入门实战
- Angular 4.0从入门到实战 打造管理网站 - 慕课网
- Angular 4.0从入门到实战
- Angular 4.0从入门到实战 打造属于你自己的股票管理网站
- gulp实战入门
- 最新Webpack4.0从入门到高手实战开发
- 最新Webpack4.0从入门到高手实战项目
- Hibernate4实战 之 第一部分 Hibernate入门
- 学习笔记(02):MySQL数据库从入门到搞定实战-DDL之数据库
- gulp入门
- [swift实战入门]手把手教你编写2048(一)
- Javase实战教学视频_从入门到精通_动力节点课堂实录
- 大数据入门到项目实战
- ElasticSearch实战-入门
- Spark入门实战指南——Spark运行架构
- React.js 入门与实战课程思维导图
- gulp入门系列之零:学习笔记
- JAVA报表开发JasperReport详解入门项目实战(完整)