gulp使用详解

Posted 2020-09-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp使用详解相关的知识，希望对你有一定的参考价值。

gulp提供了四个接口

gulp.src

gulp.dest

gulp.task

gulp.watch

++++++++++++++++++++=

gulp.src(globs[,options])

[所谓的 glob 模式是指 shell 所使用的简化了的正则表达式]

该方法就是使用匹配模式获取到相关的文件，例如js，css，image等，然后连接(pipe)输送到相关的插件去做自动化处理。

gulp.src(‘client/templates/*.jade‘)
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest(‘build/minified_templates‘));

例如上面的例子，就是匹配目标文件夹中的任意jade文件，输送到jade()方法处理，之后minify方法处理，最终输出到编译后的目标文件夹！

options是其配置选项，

{

buffer:true, //是否使用缓冲流？默认是buffer流，当设置为false的时候返回的是file.contents作为流。当处理大文件的时候，设置缓冲是很有用的！

read:true, //是否读取文件, 当设置为false的时候，会将file.contents设置为null，根本不会读取文件

base:"client" //映射的基本参照路径。

}

gulp.src(‘client/js/**/*.js‘) // 匹配‘client/js/somedir/somefile.js‘ 并且自动设置 `base` 为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/somedir/somefile.js‘ gulp.src(‘client/js/**/*.js‘, { base:‘client‘ })  // 制定base 为‘client‘

  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/js/somedir/somefile.js‘

gulp.dest(path[,options])

可以被连接处理，并执行写入文件，它会重新发出来所有发送给他的数据，所以它连接到复杂的文件夹。如果文件夹不存在，它也会自动创建！

path就是任务处理后输出数据的文件夹(output folder)。也可以是一个函数，只要该函数返回一个路径。

options是该方法的配置参数：

cwd: 这是一个字符串，默认值为process.cwd()。该配置只在提供的输出路径是相对的时候才有效。

mode：默认是0777，设置文件夹的读写属性。

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

基于Orchestrator，用于定义一个任务。

name：任务的名称

deps：任务的依赖，只有执行完这些依赖，才会执行你的任务fn。默认这是一个同步的执行方案。当然也有异步的解决方案（asynchronous）

fn：该任务的具体执行。如果你要异步该执行，那么你需要指定改任务执行完成的信息

一个大概的样子是这样的：

gulp.task(‘buildStuff‘, function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));

  return stream;
  });

如何异步执行：

var gulp = require(‘gulp‘);

// 注意fn有一个回调参数，所以当任务完成的时候，会调用这个cb，进程就会知道该任务完成了
gulp.task(‘one‘, function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// 申明了一个任务two，必须在one完成之后才能执行
gulp.task(‘two‘, [‘one‘], function() {
    // task ‘one‘ is done now
});
//默认我们是申明要执行两个任务，这两个任务会同时初始化，但是任务two会因为有依赖延迟执行
gulp.task(‘default‘, [‘one‘, ‘two‘]);