前端构建工具 grunt VS gulp
时间:2022-05-06
本文章向大家介绍前端构建工具 grunt VS gulp,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前几天一个前端大拿朋友和我说gulp比grunt更好用,就了解了一下gulp,和grunt做个简单的比较
有两个明显的感受:
(1)使用方式上,gulp的配置文件更清晰便利一些
以css文件的合并压缩为例
//------ gulp --------
var gulp = require('gulp'),
concat = require('gulp-concat'),
minifycss = require('gulp-minify-css');
gulp.task('default', function() {
return
gulp.src('css/*.css')
.pipe(concat('min.css'))
.pipe(minifycss())
.pipe(gulp.dest('dist'));
});
//------ grunt --------
module.exports = function (grunt) {
grunt.initConfig({
concat: {//css文件合并
css: {
src: ['src/css/*.css'],
dest: 'dest/all.css'
}
},
cssmin: { //css文件压缩
css: {
src: 'dest/all.css',
dest: 'dest/all.min.css'
}
}
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat','cssmin']);
}
(2)从实现底层文件操作方式上,gulp的效率更高
grunt 的实现方式:
读取源文件 -> N个临时文件 -> 写入目标文件
从配置文件可以看到,每个任务都指定了src和dest,构建过程中会进行多次 读取、修改、写入 操作,I/O操作比较频繁
gulp 的实现方式:
读取源文件 -> 内存文件流 -> 写入目标文件
gulp使用了类似linux命令中的管道思路,开始时读取一次文件,然后就一直使用内存中的文件流,通过管道在不同任务中传递文件流,最后一次性写入文件,I/O操作较少
- js中数组(Array)的排序(sort)注意事项
- 双机热备工作模式及高内聚低耦合架构解释
- linux下拷贝命令中的文件过滤操作记录
- 关于智慧城市的十大反思(上)
- scrollTop与offsetTop研究
- JQuery笔记(四) 通用选择的尝试
- Docker容器学习梳理--基础环境安装
- Javascript:模仿淘宝的信用评价
- 好米有好价! 两枚4字母域名均以五位数交易
- Docker容器学习梳理--Volume数据卷使用
- 菜单常用:复位全部并设置某个项的样式
- Mysql更换MyISAM存储引擎为Innodb的操作记录
- 比特币分叉倒计时,糖果福利又来了
- 执行git push出现"Everything up-to-date"
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- leetcode - 最小路径和
- Javascript中的数据类型
- JAVA 应用日志最佳实践
- 用pageadmin cms系统进行网站制作的经验总结
- 14个Linux系统安全小妙招,总有一招用的上
- CVE-2020-14645:Weblogic远程代码执行复现
- Centos7 安装Mysql-寻找共性-万变不离其宗
- MySQL 入门、安装和客户端管理工具
- MySQL 基本使用(上):DDL 和 DML 语句
- MySQL 基本使用(下):DCL 语句和聚合函数
- 玩转 PhpStorm 系列(二):导航篇
- 带你写出符合Promise/A+规范Promise的源码
- 「R」R Docker 教程
- 「Workshop」第十期:聚类
- 使用 Vue 3.0,你可能不再需要Vuex了