一、gulp简介
gulp是基于流形式的打包工具1.安装环境
全局安装
npm install --global gulp全局安装之后，可以在全局中多一个gulp命令
2.在项目中使用
应为需要在项目中使用gulp对象的api，所以需要在项目中安装
npm install-D gulp在项目的根目录下创建gulpfile.js打包文件
3.常用方法
gulp.task('任务名称',任务处理函数)创建一个基于流的任务
例子：gulp.task('cssHandler',()=>{
// 找到 css源文件 添加前缀 压缩 放入指定目录
} )gulp.src('路径信息')获取源文件
例子：grulp.src('./src/css/*.css')gulp.dest('路径信息')把内容放入指定目录之下
例子：gulp.dest('./dist/css/')gulp.watch('文件路径',任务名称)监听文件变化，然后执行任务函数
例子：gulp.watch('./src/css/index.css',cssHandler)gulp.series('任务一'，'任务二','...')串行执行多个任务gulp.parallel('任务一'，'任务二','...')并行执行多个任务pipe()管道函数，传递当前流
例子：glup.src('./src/index.css').pipe('压缩任务').pipe(gulp.dest('./dist/'))
二、创建处理任务 代码写在gulpfile.js中
1.css的常规处理
依赖安装
npm i gulp-autoprefixe gulp-cssminconst gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");
// gulp3 语法
// gulp.task("cssHandler", () => {
//return gulp
//.src("./src/css/*.css")
//.pipe(cssmin())
//.pipe(gulp.dest("./dist/css/"));
// });
// gulp4 语法
const cssHandler = function () {
return gulp
.src("./src/css/*.css")
.pipe(autoprefixer({
browsers:["last 2 versions"]
}))
.pipe(cssmin())
.pipe(gulp.dest("./dist/css/"));
};
module.exports = {
cssHandler
}在命令行中执行 gulp cssHandler 即可执行任务
2.处理scss
依赖下载
npm i gulp-sass node-sass编码
const scss = require("gulp-sass")(require('node-sass'));
const scssHandler = function () {
return gulp
.src("./src/scss/*.scss")
.pipe(scss())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest("./dist/scss/"));
};
3.处理js
依赖安装
npm i -D gulp-uglify gulp-babel @babel/core @babel/preset-env编码
const uglify = require("gulp-uglify");
// 压缩js代码
const babel = require("gulp-babel");
// 依赖 @babel/core @babel/preset-envconst jsHandler = function () {
return gulp
.src("./src/js/*.js")
.pipe(
babel({
// 配置需要将那些es6语法转成es5，这里使用了预设(常规转换)
presets: ["@babel/env"],
})
)
.pipe(uglify())
.pipe(gulp.dest("./dist/js/"));
};
4.处理html
依赖安装
npm i -D htmlmin编码
const htmlmin = require('htmlmin');
const htmlHandler = function () {
return gulp
.src("./src/pages/*.html")
.pipe(
htmlmin({
removeComments: true, // 清除 HTML 注释
collapseWhitespace: true, // 省略空白
collapseBooleanAttributes: true, // 省略所有标签内的布尔属性(原生属性 如checked)
removeEmptyAttributes: true, // 清除所有标签内值为空的属性
removeScriptTypeAttributes: true, // 清除标签内的 type 属性
removeStyleLinkTypeAttributes: true, // 清除和 标签内的 type 属性
minifyJS: true, // 压缩 html 页面内的 js 代码 (不能转码 es6代码不能压缩)
minifyCSS: true, // 压缩 html 页面内的 css 代码 (不能添加前缀)
})
)
.pipe(gulp.dest("./dist/pages/"));
};
5.处理img
一般不做处理，直接移动(gulp-imagemin可以无损压缩)
编码
const imgHandler = function () {
return gulp.src("./src/imgs/*.*").pipe(gulp.dest("./dist/imgs/"));
};
6.默认任务
当gulp执行时，默认执行default任务
module.exports.default =gulp.parallel(
cssHandler,
scssHandler,
jsHandler,
htmlHandler,
imgHandler
);
7.删除任务
每次打包之前，删除原来的dist文件夹
依赖安装
npm i -D gulp-clean编码
const clean = require("gulp-clean");
const cleanHandler = function () {
return gulp.src("dist/", { read: false,allowEmpty:true }).pipe(clean());
};
module.exports.default = gulp.series(
cleanHandler,
defaultTask // 这里的defaultTask 就是上面的默认任务
)8.开启服务任务
安装依赖
npm i gulp-webserver编码
const webHandler = function () {
return gulp.src("./dist").pipe(
webserver({
host: "localhost",
port: "6907",
livereload: true, // 文件修改时自动刷新页面
open: "./pages/index.html", // 默认打开页面
proxies: [
{
source: "/dt",
target:
"https://www.duitang.com/napi/blog/list/by_filter_id/",
},
],
})
);
};
module.exports.default = gulp.series(
cleanHandler,
defaultTask, // 这里的defaultTask 就是上面的默认任务
webHandler
);
9.监控任务
监听源文件的改变，执行指定的task，重新编译文件
编码
const watchHandler = function(){
gulp.watch('./src/css/*.css',cssHandler);
gulp.watch('./src/js/*.js',jsHandler);
gulp.watch('./src/sass/*.sass',scssHandler);
gulp.watch('./src/pages/*.html',htmlHandler);
}module.exports.default = gulp.series(
cleanHandler,
defaultTask, // 这里的defaultTask 就是上面的默认任务
webHandler,
watchHandler
);
10.组件(html片段)
安装依赖
nmp i gulp-file-include编码
const htmlHandler = function () {
return gulp
.src("./src/pages/*.html")
.pipe(fileInclude({ // 根据配置导入对应的html片段
prefix:'@@', // 自定义标识符
basepath:'./src/components'// 组件的基准路径
}))
.pipe(
htmlmin({ // 配置
})
)
.pipe(gulp.dest("./dist/pages/"));
};
在html引入组件片段
@@include('./header.html',{"test":"header section"})
index test page
@@include('./header.html',{"test":"footer section"})
【gulp 的基本使用】在组件html片段中使用变量
@@test
