开始使用
- 全局安装
npm install --global gulp-cli
- 创建项目目录并进入
npx mkdirp my-project // my-project 文件夹名称
cd my-project
- 在项目目录下创建 package.json 文件
npm init
- 安装 gulp,作为开发时依赖项
npm install --save-dev gulp
- 检查gulp版本
gulp --version
- 在目录中创建 gulpfile.js 的文件
// gulpfile.js文件中的测试代码
javascriptfunction defaultTask(cb) {
cb();
}
exports.default = defaultTask // 默认暴露的方法
exports.defaultTask = defaultTask // 定义了暴露的方法名称
//也可以创建一个 gulpfile.js 的文件夹,在文件夹下创建index.js
//使用方法与上类似
- 测试
gulp //执行命令,执行的是默认暴露的方法
gulp defaultTask //执行命令,执行的是暴露的defaultTask方法
//gulp --tasks //查看暴露出来的方法
基本使用
- 在gulpfile.js 的文件夹中的index.js中
const {
src,dest,series,parallel} = require("gulp")
const babel = require('gulp-babel'); //引入es6转es5,需要 npm install --save-dev gulp-babel @babel/core @babel/preset-env // npm install --save core-js
const uglify = require('gulp-uglify'); // 引入压缩js npm install --save-dev gulp-uglify
const rename = require('gulp-rename'); //引入更改后缀名 npm i gulp-rename -D
const del= require('delete'); //删除 npm i delete -D
function test(){
return src('./index.js') // src()指定文件,指定目标
.pipe(dest('./dist')) // pipe管道符
// dest()完成之后的指定位置
}
function tess(){
return src('./index.css')
.pipe(dest('./dist'))
}
function tesa(){
del(['./dist']) //删除
return src(['**/*.js','!gulpfile.js/*.js','!node_modules/**/*.js'])
//return src(['**/*.js','!gulpfile.js','!node_modules'])
// 指定根目录的所有 .js 文件
//!gulpfile.js !node_modules 除了这些文件
.pipe(babel({
presets: [['@babel/env',{
useBuiltIns:'usage',
corejs:3.18,
targets:{
node:'12.0',
browsers:'ie>11'
}
}]]
})) // es6转es5使用
.pipe(dest('./dist'))
.pipe(uglify()) //压缩代码
.pipe(rename({
extname: '.min.js' }))
.pipe(dest('./dist'))
}
exports.test = test
//exports.test = series(test,tess) // series() 按照顺序执行
//exports.test = parallel(test,tess) // parallel() 默认执行
使用模块化
npm install --save-dev webpack-stream
npm i webpack -D
// .pipe(webpack({加上配置}))
gulp test // 执行完成之后,会在根目录中输出一个dist文件夹里面有index.js