自动化工具Gulp(第1章 初识gulp)

点击查看 gulp 快速手册 , 图片展示 gulp 工作流程可以先看下!

1、什么是gulp?

gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。


2、流(stream)

流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中,定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员是对流进行所有操作的,而不用关心流的另一头数据的真正流向。流不但可以处理文件,还可以处理动态内存、网络数据等多种数据形式。

而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法,把动作串起来创建构建任务。早在Unix的初期,流就已经存在了。流在Node.js生态系统中也扮演了重要的角色,类似于*nix将几乎所有设备抽象为文件一样,Node将几乎所有IO操作都抽象成了stream的操作。因此用gulp编写任务也可看作是用Node.js编写任务。当使用流时,gulp去除了中间文件,只将最后的输出写入磁盘,整个过程因此变得更快。


3、特点

易于使用

  • 通过代码优于配置的策略,gulp 让简单的任务简单,复杂的任务可管理。

构建快速

  • 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

易于学习

  • 通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

插件高质

  • gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4、安装

首先确保你已经正确安装了nodejs环境。(使用nvm安装node.js教程)然后以全局方式安装gulp:

npm install -g gulp

全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:

npm install --save-dev gulp

这样就完成了gulp的安装,接下来就可以在项目中应用gulp了。


5、gulp的使用

  • 1、 建立gulpfile.js文件

gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件,然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例,它定义了一个默认的任务。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
}); 

此时我们的目录结构是这样子的:

  • 2、运行gulp任务

要运行gulp任务,只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具),然后在命令行中执行gulp命令就行了,gulp后面可以加上要执行的任务名,例如gulp task1,如果没有指定任务名,则会执行任务名为default的默认任务。

➜  gulp-demo gulp
(node:7273) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[02:09:24] Using gulpfile ~/tmp/gulp-demo/gulpfile.js
[02:09:24] Starting 'default'...
hello,word!
[02:09:24] Finished 'default' after 120 μs
帮助别人,快乐自己,打赏随意!