【Gulp】gulp的基本使用

安装

• 使用npm install gulp -g命令全局安装gulp
• 进入项目目录安装到本地npm install gulp@3.9.1 -D，(项目目录下安装版本为3.9.1的gulp)

注意：gulp安装的版本要和nodejs版本兼容，否则后面会出现一定的问题
我使用的node和gulp的版本
node：10.16.2
gulp：3.9.1

创建gulpfile.js文件

  然后再工程文件夹下创建名为gulpfile.js的文件，后面使用gulp命令的时候会从gulpfile.js中找到对应的任务，并执行对应的代码。

编写任务

  1. 首先在gulpfile.js中要引入gulp模块

const gulp = require('gulp');

  2. 调用gulp.task()编写任务，其中第一个参数是任务名，第二个参数是一个回调函数，在终端中使用gulp [任务名]命令就可以执行对应任务名回调函数中的代码。

gulp.task('taskname', function () {
  console.log('这是第一个任务');
});

执行gulp任务

  在终端中使用命令gulp [任务名]执行任务

gulp常用方法

• gulp.src(globs)源文件，接收参数globs: string | string[]路径字符串或者路径字符串数组，这里路径是采用glob规则

• gulp.dest(fold) 目的文件，如果文件夹不存在则创建，接收参数为文件夹路径

• pipe()管道，(目前我理解的是把对应文件路径转换成文件流，我对pipe()还不是很了解^_^)

• gulp.watch(globs,tasks)两个参数globs和任务名tasks任务名数组，表示监听globs路径的文件，一旦文件发送变化执行tasks中所有的gulp任务

  这里举一个例子↓↓↓，比较常用的拷贝功能来加深对着前三个方法的理解

gulp.task('copy-html', function () {
  return gulp.src("index.html")
    .pipe(gulp.dest('dist'));
});

  这个任务，首先gulp.src('index.html')找到源文件，然后通过pipe(gulp.dest('dist'))把index.html文件拷贝到名为dist目录下。

一次执行多个任务

gulp.task('build', ['copy-html', 'images', 'data'], function () {
  console.log('任务执行完毕');
});

  可以看的出来，gulp是异步执行多个任务，同时执行了copy-html、images、data三个任务。

示例

  附上gulp基本使用的示例完整源码↓↓↓

const gulp = require('gulp');

// 编写第一个任务

/**
 * 
 * 第一个参数: 任务的名字
 * 第二个参数: 回调函数，任务执行的功能
 */
gulp.task('taskname', function () {
  console.log('这是第一个任务');
});

/**
 *  gulp.src()  找到源文件路径
 *  gulp.dest() 找到目的文件的路径 ，如果不存在就创建
 *  pipe()
 */
// 功能： 拷贝文件
gulp.task('copy-html', function () {
  return gulp.src("index.html")
    .pipe(gulp.dest('dist'));
});


// 拷贝图片
gulp.task('images', function () {
  // return gulp.src('img/*.{jpg,png}').pipe(gulp.dest('dist/images'));
  // return gulp.src('img/*/*').pipe(gulp.dest('dist/images'));
  return gulp.src('img/**/*')
    .pipe(gulp.dest('dist/images'));
});

// 拷贝数据源
gulp.task('data', function () {
  return gulp.src(['json/*.json', 'xml/*.xml', '!json/2.json'])
    .pipe(gulp.dest('dist/data'));
});

// 一次执行多个任务,  异步执行的
gulp.task('build', ['copy-html', 'images', 'data'], function () {
  console.log('任务执行完毕');
});


// 监听
gulp.task('watch', function () {
  console.log('gulp开始监听');
  /**
   * 第1个参数 监听文件的路径
   * 第2个参数 监听执行的任务
   */
  gulp.watch('index.html', ['copy-html']);
  gulp.watch('img/**/*', ['images']);
  gulp.watch(['json/*.json', 'xml/*.xml', '!json/2.json'], ['data']);
});

其他gulp总结的很好的博客

前端构建工具gulp超详细配置, 使用教程(图文)