gulp入门

虽然现在是webpack盛行的时代，但是日常工作中仍有机会接触到gulp，特别是一些老一点的项目。
本文旨在对gulp的入门，不在对gulp的高级使用，仅仅完成写一份gulpfile.js，浅层体会一些gulp即可。

安装

用npm命令初始化一下package.json，然后用npm装一下gulp

npm init -y
npm i gulp -s

运行以下命令，看看gulp装好了没有

npx gulp -v

输出以下界面，就是安装成功了。

如果有同学出现

'gulp' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

肯定就是没认真看我的指令，前面有带一个npx的
（关于npx的使用，可以看看我这篇博客：npx:调用项目内部安装的模块）

先编译一个js文件看看

先把目录按照这样建以下吧：

同时按照目录位置新建gulpfile.js、index.js和index.html这几个文件

index.js和index.html这两个文件空着就先空着， 不急

写一下gulpfile.js：

// 把gulp一些方法拿出来用，（series, watch这两个方法后面会用到，也先拿出来）
const {
    src, dest, series, watch, task } = require('gulp')

// task表示定义一个任务
task('scripts', function () {
   
	// src方法读取该路径下的文件
	src('src/js/*.js')
		.pipe(dest('./dist/js')) // 输出文件的位置
})

在终端输入：

npx gulp --tasks

可以看到所定义的任务

然后输出npx gulp <任务名>即可执行相对应的项目

这个时候可以看到多了一个dist目录了

细心的同学会发现执行上面的命令报了一个错

这是因为gulp的任务都是异步的，所以你需要告诉gulp你的任务执行完了。可以这样改写gulpfile.js

const {
    src, dest, series, watch, task } = require('gulp')

task('scripts', function (cb) {
   
	src('src/js/*.js')
		.pipe(dest('./dist/js'))
	cb()
})

再次执行npx gulp scripts就没报错了

这个所谓的’编译’，其实只是把src/js/index.js文件 挪了一挪位置而已

下面用gulp-uglify把js文件压缩一下

先安装gulp-uglify

npm i gulp-uglify -D

将gulpfile.js文件改写一下：

1. 引入const uglify = require('gulp-uglify')
2. 使用uglify

const {
    src, dest, series, watch, task } = require('gulp')
const uglify = require('gulp-uglify') // 引入

task('scripts', function (cb) {
   
	src('src/js/*.js')
		.