gulp 入门

开始使用

• 全局安装

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