前端构建工具Gulp

前言

前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具。有的工具提供的功能还是非常强大的。

FIS。百度团队的产品。现在百度的多个产品中使用。面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。学习成本相对比较高。官网

CodeKit。自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致力于js文件合并和压缩,以及js语法错误检查同时还支持Compass(Sass伴侣)。这个只是知道而已没去深究,貌似百度搜文文章也不多。官网

yeoman。Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。官网

Bower。一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt。官网

webpack。一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。官网

有兴趣的可以去了解下,上面的我也是一知半解的。

本文主角

构建工具大多都是居于nodejs下的。说起gulp,就不得说下grunt。相信 很多小伙伴都会在网上看到它俩在一起的。下面是摘抄网上的对比:

易用Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。

高效Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。

高质量Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。

易学Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。

使用Grunt的I/O过程中会产生一些中间态的临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。

代码优于配置维护Gulp更像是写代码,而且Gulp遵循CommonJS规范,因此跟写Node程序没有差别。

gulp安装

先来说下npm工具,npm是随同NodeJS一起安装的包管理工具,装了node会默认装上npm工具。### 前言

前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具。有的工具提供的功能还是非常强大的。

安装gulp之前,先安装nodejs环境,因为gulp是基于nodejs的前端构建工具。window平台下直接安装,一直下一步就行。百度搜下node官网就下得到安装包。

全局安装gulp。cmd模式下执行下面代码,--global全局安装。

在开发项目上,安装项目依赖。如果gulp全局安装了,就不会再重新下载了。此操作会在项目目录中生成一个package.json依赖文件。--save生产环境,-dev开发环境。一般两者都会一起用。这个在package.json可以看出来区别。

在项目中新建gulpfile.js文件,写流程代码。下面是项目中用到的:

上面的注释都写的很清楚了,就不多阐述了。相关的可以去npm官网搜索相关插件看下具体的用法就行了。

一些问题

协同开发怎么共用gulp

package.json文件里写的插件依赖就派上用场了。在项目中直接执行下面代码就可以自动全部安装依赖插件了:

npm下载缓慢

可以使用淘宝镜像具体用法移步:>淘宝npm镜像

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180619G07U5100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券