前端构建工具gulp之基本介绍

Posted wjmm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端构建工具gulp之基本介绍相关的知识,希望对你有一定的参考价值。

1、基本介绍

  gulp.js是一个自动化构建工具,是自动化项目的构建利器。可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成。这样能很大的提高我们的工作效率。

  gulp.js是基于Node.js构建的,利用Node.js流可以快速的构建项目,例如能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定等。

2、自动化构建工具

  grunt : 也是基于Node.js的自动化任务运行器,它在I/O过程(计算机在存储器上读取数据和写入数据的过程)中会产生一些中间态的临时文件,基于临时文件再做处理生成最终的构建后的文件。grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以实现。

  grunt工作方式是以文件为媒介来运行它的工作流的,比如执行完一项任务后,会把结果写入到一个临时文件中,然后可以在这个临时文件内容的基础上执行其它任务,执行完成后又把结果写入到临时文件中,然后又以这个为基础继续执行其它任务...就这样反复下去。

      首先 grunt和gulp都是基于Node.js的自动化构建工具,但是它们还是很大区别的。grunt和gulp的比较:

  a.使用性:gulp比grunt更简洁,采用代码优于配置策略,维护gulp更像是写代码,而grunt更像是在写配置

  b.构建效率:gulp比grunt更高效,gulp利用流的方式处理文件,通过管道将多个任务和操作连接起来,只有一次I/O的过程,而grunt是通过I/O过程产生一些临时文件,基于临时文件再做处理。

  c.构建质量:gulp比grunt构建质量更高,gulp的每个插件只完成一个任务,分工明确,各个功能通过流进行整合并完成复杂任务,促进插件的可重用性。而grunt一个插件可以实现多个功能。

  d.易学程度:gulp比grunt更容易学,gulp的核心api只有5个,然后通过管道流组合成自己想要的任务。

  FIS3 : 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。这是百度的前端团队前端工程化经验的总结。gulp轻量级,想要实现什么功能,就安装什么插件;而FIS3必须以项目的形式运行,内置集成了大部分常用的插件,拥有一套比较强大的解决方案。

  webpack : 是一种模块化的解决方案,是文件打包工具。和glup/grunt没有可比性,只是有相似的功能。它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

  webpack的工作方式把项目当做一个整体,通过一个给定的主文件,Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

  每种工具都有其存在的意义,各有各的优势和缺点,我们要结合我们项目的实际情况和需求选择合适的构建工具。结构简单的中小型项目用gulp实现基本操作就足够了,下面主要介绍gulp的使用。

3.gulp的安装

第一步:安装Nodejs;首先,gulp是基于Node.js构建的,所以首先要安装Nodejs,执行命令行 node  -v,查看版本号,查看是否已安装Nodejs;

  技术分享图片

第二步:全局安装gulp;使用npm(包管理工具)安装插件,先全局安装gulp,执行命令 npm install gulp -g (-g表示全局安装),全局安装为了可以运行命令行,执行gulp任务;

第三步:新建package.json文件;在你项目的根目录下新建package.json文件(注意里面不能写注释) 执行命令 npm init

  技术分享图片

 第四步:本地安装gulp插件; 在你的项目内安装gulp插件,执行命令 npm install gulp --save-dev,本地安装是为了脚本依赖,调用gulp插件功能;

  技术分享图片

 第五步:新建gulpfile.js文件(配置文件),文件名不能更改,例如在里面执行简单的任务;

   技术分享图片

 第六步:运行gulp

  技术分享图片

以上是关于前端构建工具gulp之基本介绍的主要内容,如果未能解决你的问题,请参考以下文章

前端构建工具gulp之实际应用

前端工程化之gulp

前端构建工具gulp入门教程

前端构建工具gulpjs的使用介绍及技巧

前端构建工具gulpjs的使用介绍及技巧

前端构建工具gulpjs的使用介绍及技巧