让前端飞前端开发那些事Gulp前端构建

Gulp的安装使用与API详解

2018-07-13  本文已影响8人  朱man

前言

以前一直使用Grunt作为前端自动化构建工具，但始终觉得配置繁琐，在之后一个项目中便决定使用更流行的构建工具Gulp。因为Gulp使用node的stream流进行文件和数据的读取操作，能减少I/O次数，速度更快，主要API只有4个，易上手。下面我们来详细学习一下Gulp这个工具吧。

安装

确保你已经安装好了node环境，首先全局安装gulp

npm install -g gulp

然后切换路径到你项目的package.json文件所在目录下，本地安装gulp

npm install gulp --save-dev

为什么要安装两次呢？因为全局安装是方便你直接使用gulp命令，而本地安装是因为之后需要安装的gulp插件需要依赖gulp。主要是为了灵活，不用太纠结。

开始使用gulp

与grunt依赖一个Gruntfile.js一样，gulp也依赖一个主文件gulpfile.js，这个文件主要定义了gulp的一些任务。我们可以进入项目package.json文件所在目录，一般是根目录，创建一个js文件并命名为gulpfile.js，然后写入一个最简单的任务，例如：

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

这时我们的目录结构为
├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json
在终端运行命令gulp便可看到终端打印一句hello world。你可以给任务一个特定的名字，然后运行特定任务，如gulp build，如果没有指定任务则自动执行default任务。

API介绍

搭建好工具后就要写入一些任务为项目服务了，gulp的任务编写就跟写js一样，主要API只有4个gulp.src()、gulp.dest()、gulp.task()、gulp.watch()，易于掌握，下面主要介绍一些易理解偏差的点，所以大家还是先看一遍官网的介绍。

1、gulp.scr()

在gulp中使用的是node的stream流，首先获取到stream，然后通过stream的pipe()方法把流导向你想要的地方，而gulp.src()方法就是获取流的。但这个并不是原本的文件流，而是封装过后的虚拟文件对象流(Vinyl files)，带有原始文件的名称、路径、内容等信息。该方法的语法为：

gulp.src(globs [, options])

globs是文件匹配模式(类似正则匹配)，用来匹配文件路径，也可以直接指定某个具体的文件路径，如果有多组匹配模式可以使用数组形式。options是一个可选参数。

下面介绍一下globs的匹配规则：

当有多组匹配模式时，可以使用数组

gulp.src(['static/**/*.js', 'static/**/*.css', 'static/**/*.html'])

使用数组的好处在于能使用!进行排除某些模式，但注意!不能为数组的第一个字符

gulp.src(['static/**/*.js', '!static/module/*.js'])
2、gulp.dest()

gulp.dest()方法是用来写文件的，语法如下：

gulp.dest(path [, options])

path是路径参数，options是可选参数，一般用不到。

如果想用好这个方法，就要理解好文件传入路径与传出路径的关系。gulp的工作流程是通过src()获取指定路径下的文件流，通过pipe()导到某些gulp插件中处理，完成后通过pipe()导到dest()中，最后写到指定的目录下。

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

如果想改变文件名称可以使用其他gulp插件完成。

var gulp = require('gulp');
// 如果匹配到的文件是static/js/me/me.js
gulp.src('static/js/**/*.js')
      // 由于通配符出现的部分是**/*.js，所以导出的文件路径是dist/js/me/me.js
      .pipe(gulp.dest('dist/js'));

再比如

gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js

通过设置gulp.src()的base参数，可以灵活的修改gulp.dest()生成的路径，如果没有设置则base参数默认是指传入路径匹配模式通配符出现前的部分，比如：

gulp.src('app/src/**/*.css') //此时base的值为 app/src

所以上面的说法可以理解为，gulp.dest()生成的路径是path参数替换传入文件路径的base部分，修改base参数就可以修改生成文件路径，比如：

// 没有配置base参数，此时默认的base路径为script/lib
gulp.src('script/lib/*.js') 
     // 假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')); // 生成的文件路径为 build/jquery.js

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

gulp.task()是用来定义任务的，内部使用的是Orchestrator，一个以最大并发排列和运行任务和依赖的模块，task的语法为：

gulp.task(name [, deps] fn)

name是定义的任务名，deps是任务依赖的其他任务，是一个数组的形式，定义的任务会在依赖的任务执行完成后再执行，如果没有依赖任务可以省略，fn是任务具体执行的操作，该参数也是可选的。

在gulp.task()中执行多个任务，可以通过依赖来完成，比如要执行default任务时，还要执行one、two、three三个任务，可以这样写

// 这样one tow three三个任务都被执行了
gulp.task('default', ['one', 'two', 'three'], function() {
    // do something
})

如果任务相互间没有依赖，则任务会按照你写的顺序执行，如果有依赖则先执行依赖的任务。但如果某个依赖的任务是异步的，那gulp不会等待这个异步任务执行完，而会继续执行后面的任务。例如：

gulp.task('one',function(){
  //one是一个异步执行的任务
  setTimeout(function(){
    console.log('one is done')
  },5000);
});

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

最终的结果是先打印'two is done'，然后再打印'one is done'。
那我们如何实现异步任务同步的功能呢，请看我的另一篇文章《以同步方式运行gulp的异步任务》。

4、gulp.watch()

gulp.watch()是用来监听文件变化的，这样你就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为

gulp.watch(glob [, opts] task)

glob是文件的通配符模式，匹配文件路径，opts是可配置参数，一般不用，task是监听变化后要执行的任务，是一个数组。

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

gulp.watch()还有另一种形式

gulp.watch(glob [, opts] cb)

前两个参数一样，cb是回调函数，监听的文件变化时会调用该方法，方法传递一个参数，该参数带有文件变化的信息，type属性为变化的类型，可以是added，changed，deleted；path属性为发生变化的文件的路径

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

gulp常用插件

最后希望本文能帮助初学gulp的朋友理解gulp，参考自《前端构建工具gulpjs的使用介绍及技巧》，谢谢！

上一篇下一篇

猜你喜欢

热点阅读