Gulp的使用
一、什么是Gulp
Gulp是 基于Node.js流的前端自动化构建工具,主要用来设定程序自动处理静态资源的工作
gulp中文官网: https://www.gulpjs.com.cn/
插件地址: https://gulpjs.com/plugins/
二、安装Gulp
- 检查 node、npm 和 npx 是否正确安装
/* 检查node的版本 */
node --version
/* 检查npm版本 */
npm --version
/* 检查npx版本 */
npx --version
-
删除旧版本(如果存在的话)
npm rm gulp --global
-
全局安装gulp-cli (安装一次就好了)
npm install gulp-cli --global
-
作为项目的开发依赖(devDependencies)安装:
npm install gulp --save-dev
-
使用gulp,先创建一个项目,确保根目录存在 package.json 文件,执行 npm init -y 生成
-
安装 gulp,作为开发时依赖项
npm install gulp --save-dev
-
检查gulp版本
gulp --version
或gulp -v
-
创建 gulpfile 文件
在项目根目录下创建一个名为 gulpfile.js的配置文件:
此文件是项目主文件,运行gulp命令时,默认运行 node gulpfile.js
三、gulp 常用API
1.gulp.task 方法用来注册任务
gulp.task(taskName,taskFunction)
/*
taskName为任务名
taskFunction为任务要执行的回调,任务要执行的代码都写在里面
*/
/* 注册任务1 */
var gulp = require('gulp');
gulp.task('task1',function (done) {
console.log('执行任务1');
done();// 异步任务完成
})
/* 注册任务2 */
var gulp = require('gulp');
function task2(done){
console.log('执行task2');
done(); //异步任务完成
}
exports.task2 = task2 //注册任务task2
module.exports = {
task2 } //注册任务task2
在以前的 gulp 版本中,task() 方法用来注册任务(task)。
虽然这个 API 依旧是可以使用的,但是 导出(export)将会是主要的注册机制,除非遇到 export 不起作用的情况。
2.gulp.src 创建一个流,用于从文件系统读取元数据对象(用来 读取/引入 文件)
gulp.src(globs[, options])
globs参数 是文件匹配模式(类似正则表达式),当然也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数为一个数组。
options为可选参数,通常不需要用到。
gulp.src('./js/a.js'); // 读取一个文件
gulp.src('./js/*.js'); // 读取js目录下的所有js文件
gulp.src('./js/**/*.js'); // 读取js目录及子目录下的所有js文件
gulp.src(['./js/a.js','./js/b.js']); // 读取两个匹配的文件
gulp.src(['./js/*.js','!./js/b.js']); // 读取js目录下的所有js文件,除了b.js文件
3.gulp.dest 创建一个流,用于将元数据对象写入到文件系统(写入/设置/输出 文件放置目录)
gulp.dest(path[,options])
/*
path 将写入文件的输出目录的路径。
options 为可选参数,通常不需要用到。
*/
/*
读取文件流(gulp.src),通过管道(pipe),
把文件流写入(gulp.dest)当前目录下的 dist 文件夹中
*/
var gulp = require('gulp');
gulp.task('mytask',async ()=>{
gulp.src("./js/a.js")
.pipe(gulp.dest("./dist"));
});
4.gulp.watch 监听 globs 并在发生更改时运行任务
gulp.watch(globs[, options], [tasks])
/*
globs 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的globs相同。
options 为可选参数,通常不需要用到。
tasks 为文件变化后要执行的一个函数,由 series() 和 parallel() 生成的组合任务
*/
gulp