官网文档：www.gulpjs.com.cn/

常用命令说明

1. --save-dev

--save：将这个文件，安装到本地项目的文件夹  
-dev：将安装的gulp信息保存到package.json中

2. 删除全局安装的gulp

npm rm --global gulp

3. 查看gulp版本

npx gulp --version

4. 查看任务

npx gulp --tasks

基础项目初始化步骤

1. 项目初始化

npm init -y （-y表示简化版本）

2. 本地项目安装gulp

npm install --save-dev gulp

安装指定版本的gulp（可以直接删除node_modules文件夹，然后再安装新的版本）
npm install --save-dev gulp@3.9.1 （最新是4.0.2，他的上一个版本是3.9.1）

3. 创建gulpfile.js任务（新建一个gulpfile.js文件）

function defaultTask(cb) {
    cb();
    console.log('执行任务defaultTask');
}
exports.default = defaultTask;


//单独调用copy任务
const { src, dest } = require('gulp');

function copy() {
    return src('*.js')
        .pipe(dest('output/'));
}

exports.copy = copy;

4. 创建npm脚本快捷运行

 "build": "gulp"   //默认调用default导出的方式
 "build-copy": "gulp copy" // 单独调用copy任务

5. 命令窗口运行

npm run build

使用babel和gulp结合使用的例子

1. 项目初始化

npm init -y

2. 本地项目安装gulp gulp-babel

npm install --save-dev gulp gulp-babel gulp-uglify gulp-rename

3. 项目安装babel依赖

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

4. 创建gulpfile.js任务（新建一个gulpfile.js文件）

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

//分段输出，同时创建已压缩和未压缩的文件

exports.default = function() {
    return src('src/*.js')
        .pipe(babel())
        .pipe(dest('output/'))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(dest('output/'));
}

5. src/index.js文件内容是

const sayHi = () => {
    console.log('Hi,gulp babel');
}
sayHi();

编译后输出为：output/index.js
"use strict";
var sayHi = function sayHi() {
  console.log('Hi,gulp babel');
};
sayHi();

项目的监听

gulpfile.js

const { watch, series } = require('gulp');

function clean(cb) {
    console.log('clean run');
    cb();
}

function javascript(cb) {
    console.log('js run');
    cb();
}

function css(cb) {
    console.log('css run');
    cb();
}

//监听文件：
//第一个参数是：要监听的文件的路径
//第二个参数是：要监听文件需要执行的任务

//可以只关联一个任务
watch('src/*.css', css);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));

//执行的时候，在命令行  node gulpfile.js 就可以实时监听数据的变化