Gulp入门教程之一 Gulp的安装与配置

webpack admin 暂无评论

1. 什么是gulp

gulp是前端自动化项目的构建利器,开发过程中对代码做构建的一个很方便的工具,不但可以对网站资源进行优化,而且我们在开发过程中的一些很重复性的任务可以使用gulp工具自动来完成,比如:

  • 把文件从开发目录拷贝到生产目录

  • 把多个 JS 或者 CSS 文件合并成一个文件

  • 对JS文件和CSS进行压缩

  • 把sass或者less文件编译成CSS

  • 压缩图像文件

  • 创建一个可以实时刷新页面内容的本地服务器

只要你觉得有些动作是要重复去做的,就可以把这些动作创建成一个gulp任务 然后在指定的条件下自动执行 比如在less源文件发生改变后自动编译成css文件

2. gulp特点

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

  • 快速构建 利用 node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。前一级的输出,直接变成后一级的输入,使得在操作上非常简单

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

  • 易于学习 通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握。

3. 流

3.1 流的概念

  • Stream是nodejs各种对象实现的抽象接口。

  • 所有的stream对象都是EventEmitter的实例,可以发射事件。

  • 流是一种有起点和终点的数据传输手段。

  • 上一个的输出是下一个的输入

3.2 gulp中的流

  • gulp正是通过代码优于配置的策略来尽量简化任务编写的工作。

  • 类似jquery里的链式操作,把各个方法串连起来构建完整的任务。

  • 用gulp编写任务也可看作是用Node.js代码编写任务。

  • 当使用流时,gulp不需要生成大量的中间文件,只将最后的输出写入磁盘,整个过程因此变得非常快。

4. 安装gulp

在项目里使用gulp需要

  • 安装node

  • 在全局范围内去安装一下gulp的命令行工具

  • 然后在项目里面再去本地安装gulp

4.1 安装node

gulp是基于Nodejs的自动任务运行器 安装Gulp和相关行件用的都是node的包管理工具npm 所以你需要先在电脑上安装 node,确定在命令行工具的下面可以使用npm这个命令,这样就能去安装Gulp了

node.js官网

安装好以后,我们可以打开命令行工具,mac 用户可以使用终端工具,windows 用户可以找到cmd命令行工具。

4.2 gulp 命令行工具

  • 使用 npm install 去安装 gulp,注意加上一个 -g 的参数,表示在全局范围内去安装.

  • 一般用 npm 安装的时候用一个 -g 的参数就表示,这个安装的东西会作为命令去执行。

  • 如果你在mac或linux下遇到了权限问题,在下面这个命令的前面加上 sudo npm install gulp -g 并输入mac密码。

    $ npm install -g gulp

    安装完成后可以输入 gulp --help 如果输出一些帮助的信息就表示可以gulp命令行成功安装了

如果安装不上可以换一下源试试

4.3 gulp本地安装

  1. 先创建一个目录 在 mac 和 linux 操作系统下创建一个文件夹

    $ mkdir learngulp

  2. 使用 cd 命令进入此目录

    $ cd learngulp

  3. 创建项目描述文件package.json 项目需要一个叫package.json的文件来管理项目的配置,可以使用 npm init 这个命令生成

$ npm init
name: (zhufeng_automation) learngulp //项目名称
version: (1.0.0) 1.0.0   //项目版本号
description: learn gulp //项目说明
entry point: (index.js) index.js // 入口文件
test command: test.js //测试脚本 执行npm test时会执行此文件
git repository: (https://github.git) //模块的git仓库
keywords: node.js gulp  //在npmjs官网搜索时的关键字
author: zhufengpeixun //项目作者名字
license: (ISC) MIT //授权协议
About to write to D:\mygit\zhufeng_automation\package.json:
Is this ok? (yes) yes //直接回车确认

回车后会在当前目录下创建一个 package.json 文件

5. 安装gulp

  1. 本地安装gulp到开发依赖中


    $ npm install gulp --save-dev

这样可以把 gulp 作为项目的开发依赖(只在开发时用,不会发布到线上) 第一会在node_modules下安装本地的gulp库 第二会把并把添加配置到package.json文件里面

   "devDependencies": {
   +        "gulp": "^3.9.0"
     }

运行gulp

5.1 创建配置文件

gulp的任务要放到一个叫 gulpfile.js 的文件里面 先在项目的根目录下面创建一个这样的文件 然后在这个文件的顶部添加下面这行代码

+   var gulp = require('gulp');

通过require可以把gulp模块引入当前项目并赋值给gulp变量 这样gulp这个变量里面就会拥有gulp的所有的方法了

5.2 创建gulp的任务

可以使用gulp的task方法 同样我们去创建一个叫 hello 的任务,它要做的事就是在控制台上输出 "您好" 这两个字

  1. 第一个参数是任务的名称

  2. 第二个参数是任务的定义,是一个匿名函数

    gulp.task('hello', function () {
       console.log('您好');
    });

5.3 执行gulp任务

打开命令行工具,进入到项目所在的目录,然后输入:

$ gulp hello

会返回:

   [21:36:34] Starting 'hello'...
   您好
   [21:36:34] Finished 'hello' after 959 μs

gulp后面跟着的是任务的名称 不输入任务名称的话会默认找default任务,找不到会报错

5.4 执行其它任务

可以使用

$ gulp

6. gulp参数

gulp 只有你需要熟知的参数标记,其他所有的参数标记只在一些任务需要的时候使用。

  • -v 或 --version 会显示全局和项目本地所安装的 gulp版本号

  • --gulpfile 

    手动指定一个 gulpfile 的路径,这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录

  • --cwd dirpath 手动指定 CWD。定义 gulpfile 查找的位置,此外,所有的相应的依赖(require)会从这里开始计算相对路径

  • -T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树

  • --color 强制 gulp 和 gulp 插件显示颜色,即便没有颜色支持

  • --no-color 强制不显示颜色,即便检测到有颜色支持

  • --silent 禁止所有的 gulp 日志

7. gulp.js工作方式

gulp的使用流程一般是

  1. 首先通过gulp.src()方法获取到想要处理的文件流

  2. 然后把文件流通过pipe方法导入到gulp的插件中

  3. 最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中

  4. gulp.dest()方法则把流中的内容写入到文件中

   var gulp = require('gulp');
   gulp.src('script/src.js')             // 获取文件的流的api
       .pipe(gulp.dest('dist/dest.js')); // 写文件的api

8. gulp核心API

gulp只有4个核心API

8.1 gulp.src()

在Gulp中,使用的是Nodejs中的stream(流),首先获取到需要的stream 然后可以通过stream的pipe方法把流导入到你想要的地方 比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中,当然也可以把流写入到文件中 所以Gulp是以stream为媒介的,它不需要频繁的生成临时文件,这也是Gulp的速度快的一个原因 gulp.src()方法正是用来获取流的

但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径、文件名和内容等信息 vinyl

var File = require('vinyl');
var indexFile = new File({
   cwd: "/",
   base: "/test/",
   path: "/test/index.js",
   contents: new Buffer("name=zfpx")
});
console.log(File.isVinyl(indexFile));
console.log(indexFile.isBuffer());
console.log(indexFile.isStream());

其语法为:

   gulp.src(globs[, options])

  • globs 参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组

  • options 为可选参数。通常情况下我们不需要用到

8.2 glob语法

gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件:

8.2.1 glob规则

匹配符

说明


匹配文件路径中的0个或多个字符,但不会匹配路径分隔符

**

匹配路径中的0个或多个目录及其子目录

?

匹配文件路径中的一个字符(不会匹配路径分隔符)

[...]

匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个

!(pattern|pattern|pattern)

匹配任何与括号中给定的任一模式都不匹配的

?(pattern|pattern|pattern)

匹配括号中给定的任一模式0次或1次,类似于js正则中的(pattern|pattern|pattern)?

+(pattern|pattern|pattern)

匹配括号中给定的任一模式至少1次,类似于js正则中的(pattern|pattern|pattern)+

(pattern|pattern|pattern)

匹配括号中给定的任一模式0次或多次,类似于js正则中的(pattern|pattern|pattern)*

@(pattern|pattern|pattern)

匹配括号中给定的任一模式1次,类似于js正则中的(pattern|pattern|pattern)

8.2.2 glob示例

glob

匹配

*

能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.*

a.js,style.css,a.b,x.y

*/*/*.js

能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

**

能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件

a/**/z

能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z

能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录

?.js

能匹配 a.js,b.js,c.js

a??

能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符

[xyz].js

只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符

[^xyz].js

能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

8.3 gulp.dest()

是用来向硬盘写入文件的,其语法为:

    gulp.dest(path[,options])

  • path 为写入文件的路径

  • options 为一个可选的参数对象,通常我们不需要用到

要想使用好gulp.dest()这个方法,就要理解给它传入的路径参数与最终生成的文件的关系。

gulp.dest()传入的路径参数只能用来指定要生成的文件的目录,而不能指定生成文件的文件名 它生成文件的文件名使用的是导入到它的文件流自身的文件名 所以生成的文件名是由导入到它的文件流决定的

    var gulp = require('gulp');
    gulp.src('script/jquery.js')
       .pipe(gulp.dest('dist/jquery.js'));
    //最终生成的文件路径为 dist/jquery.js/jquery.js,而不是dist/jquery.js

gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径

通过指定gulp.src()方法配置参数中的base属性,我们可以更灵活的来改变gulp.dest()生成的文件路径

//配置了base参数,此时base路径为scriptgulp.src(script/lib/*.js, {base:'script'})
   //假设匹配到的文件为script/lib/jquery.js
   //此时生成的文件路径为 build/lib/jquery.js
   .pipe(gulp.dest('build'))

8.4 gulp.task()

gulp.task方法用来定义任务,其语法为:

   gulp.task(name[, deps], fn)

  • name 为任务名称

  • deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数

  • fn 为任务定义函数,我们把任务要执行的代码都写在里面。该参数也是可选的。

     gulp.task('mytask', ['array', 'of', 'task', 'names'],   function() { //定义一个有依赖的任务
         // Do something
     });

如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务

//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('one',function(){      //one是一个异步执行的任务
     setTimeout(function(){
        console.log('one is done')
     },5000);
   });
gulp.task('two',['one'],function(){  
    console.log('two is done');
   });

在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数

gulp.task('one',function(cb){ //cb为任务函数提供的回调,用来通知任务已经完成
     //one是一个异步执行的任务
     setTimeout(function(){  
       console.log('one is done');
       cb();  //执行回调,表示这个异步任务已经完成
     },5000);
   });

8.5 gulp.watch()

用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件拷贝等。其语法为

   gulp.watch(glob[, opts], tasks)

  • glob 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的 glob 相同。

  • opts 为一个可选的配置对象,通常不需要用到

  • tasks 为文件变化后要执行的任务,为一个数组

     gulp.task('uglify',function(){  
       //do something
     });
     gulp.task('reload',function(){  
      //do something
     });
     gulp.watch('js/**/*.js', ['uglify','reload']);

另外一种使用方式:

   gulp.watch(glob[, opts, cb])

  • glob和 opts 参数与第一种用法相同

  • cb参数为一个函数。每当监视的文件发生变化时,就会调用这个函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息 type属性为变化的类型,可以是 added、changed、deleted和path属性为发生变化的文件的路径

      gulp.watch('js/**/*.js', function(event){    //变化类型 added为新增,deleted为删除,changed为改变
       console.log(event.type);    //变化的文件的路径
       console.log(event.path);
     });


转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » Gulp入门教程之一 Gulp的安装与配置

喜欢 ()or分享