我为什么选择gulp
Posted 前端玩法
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我为什么选择gulp相关的知识,希望对你有一定的参考价值。
我们都知道使用IDE编写后端程序时,我们都需要Build, 对.NET来说,我们一般需要使用Visual Studio来确保我们的项目编译通过,而且项目编译通过是对所有程序员的基本要求。
但是,由于很多后端程序员对前端的很多东西不了解,导致在做WEB项目时出现了一些问题。
javascript和CSS的版本问题
但是如果这个动作是手动的,那么10次基本上至少有5次程序员会忘掉,那么这就是为什么我们需要前端构建
JavaScript和CSS的依赖问题
我们经常出现的另一个问题,就是JavaScript和CSS的依赖问题,说的通俗点就是JavaScript和CSS的在页面中的顺序问题!
我们经常发现CSS没起作用,JavaScript的某个变量和方法找不到,有很多情况都是因为引入JavaScript或者CSS的顺序不对,虽然我们可以使用一些RequireJS之类的模块管理,但是依然在很多情况下需要引入不同的文件,尤其是CSS没有一个好的模块化管理的组件。
那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题,而构建工具可以大大减少此类问题。
性能优化
我们都知道浏览器请求的文件越多越耗时,请求的文件越大越耗时,尤其是在我们现在很多使用前端MVC, MVVM框架的时候,我们为了前端代码更清晰,结构更合理,我们就由很多JS文件,无疑又拖慢了网页的速度。为了解决这个问题,因此我们需要做两件事
文件合并
浏览器需要下载多个JS文件,而浏览器是有并发限制,也就是同时并发只能下载几个文件,假如浏览器并发数是5,你有20个JS文件,而每5个需要2S, 那么你光下载JS文件都需要8S,那么网页的性能可想而知,所以我们需要合并多个文件以减少文件的数量。
文件压缩
我们知道文件越大,下载越慢,而针对JavaScript和CSS, 里面的空格,换行这些都是为了让我们读代码时更容易阅读,但是对机器来说,这些对它没有影响,所以为了减少文件大小,一般的情况我们都会用工具去掉空格和换行,有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做,而源代码一定要保证命名可读性) 来减少文件大小。
而所有的前端构建工具都具有文件合并和压缩的功能。
效率提升
Vendor前缀
在CSS3使用越来越多的时候,我们都知道一些CSS的特性,不同的浏览器CSS有不同的前缀,如果我们手工添加将会很繁琐,而如果使用构建工具,很多构建工具可以自动给我添加CSS的Vendor前缀
单元测试
JavaScript的单元测试在使用MVC或者MVVM的框架后,变得越来越容易,而单元测试是质量保证的一个很重要的手段,所以在提交之前,使用构建工具自动跑一遍我们的单元测试是非常重要的
代码分析
我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号,某个变量没有等等,使用一些JavaScript的代码分析工具,可以很好的帮我们检查一些常见的问题。
html引用JavaScript或者CSS文件
比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库,那么如果版本升级,添加移除等都用手工来修改HTML的话,第一比较耗时,第二比较容易疏漏,尤其是在我们需要切换Debug和production版本时将会有很多额外的工作,那么使用前端构建工具可以很好的解决这些问题。
我们说了为什么需要前端构建,简单一句话,就是让我们的工作更有效率。
相信熟悉前端的人对Grunt一定不陌生,实际上我自己之前的很多项目也是在用Grunt, Grunt的出现是前端开发者的福音,大大减少了前端之前很多手工工作的繁琐以及我上一篇 前端构建大法 Gulp 系列 (一):为什么需要前端构建 提到的那些问题。
那么既然Grunt可以做到几乎所有的事情,那么为什么我们需要Gulp呢?
Grunt与Gulp的区别
我们来看一下一般前端构建的流程, 一般情况下,我们是在脑子中是流的方式来想任务的。
二者处理流程的区别
Grunt 的方式
Gulp的方式
配置的简洁程度
Grunt
module.exports = function(grunt) {// Project configuration.grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
} ,
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Gulp
gulp.task('default',function(){ return gulp
.src("**/*.js")
.pipe(jshint())
.pipe(concat())
.pipe(uglify())
.pipe(gulp.dest('./build/'))
})
所以从上面的一些代码对比来看,Gulp明显比Grunt要简洁易用很多。
最后,总结一些 Grunt的一些问题
配置过于复杂
插件职责不单一 (就是不SRP)
临时文件目录多
性能慢 (因为临时文件多,自然读IO多)
下一篇我们将开始学习如何使用gulp来构建我们的前端。
前端玩法
微信:web_html
一起玩前端
长按二维码关注
以上是关于我为什么选择gulp的主要内容,如果未能解决你的问题,请参考以下文章