当你在前端开发中使用Gulp时，你通常会使用它来自动化一些常见的任务，例如编译Sass、压缩图片、合并JavaScript文件等等。以下是一个使用Gulp来编译Sass和压缩CSS的示例：
首先，你需要在你的项目中安装Gulp。你可以使用npm或yarn来安装：
npm install gulp --save-dev或 yarn add gulp --dev
安装完成后，你需要创建一个名为gulpfile.js的文件，这个文件是Gulp的配置文件。在这个文件中，你可以定义一些任务来完成你需要自动化的工作。
const gulp = require('gulp');const sass = require('gulp-sass');const cleanCSS = require('gulp-clean-css');
// 编译Sass
gulp.task('sass', function() {
return gulp.src('./src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
// 压缩CSS
gulp.task('minify-css', function() {
return gulp.src('./dist/css/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('./dist/css'));
});
// 默认任务
gulp.task('default', gulp.series('sass', 'minify-css'));
在上面的代码中，我们使用了gulp-sass和gulp-clean-css两个插件来编译Sass和压缩CSS。我们定义了两个任务：sass和minify-css，分别用于编译Sass和压缩CSS。我们还定义了一个默认任务default，它会依次执行sass和minify-css任务。
当你完成了配置后，你可以在终端中运行Gulp来执行你的任务。例如，要执行默认任务，你可以在终端中输入以下命令：
gulp
这将会依次执行sass和minify-css任务。当你修改了Sass文件后，Gulp会自动重新编译Sass并压缩CSS，这样你就可以专注于代码的编写而无需手动执行这些任务了。
gulp依赖包的下载过程
1、创建项目文件夹 ，src 存储源文件，dist 存储压缩文件。
2、项目文件夹初始化，cmd命令：npm init -y
3、gulp依赖包的下载安装
(1) 下载gulp全局依赖包，cmd命令：npm i -g gulp
(2) 下载gulp开发依赖包
2-1 gulp开发依赖包，cmd命令：npm i -D gul
2-2 css文件 打包压缩需要的依赖包
自动给css代码添加前缀，cmd命令：npm i -D gulp-autoprefixer
需要配置package.json文件中的配置设定，实际项目中，浏览器版本的兼容根据不同的项目做响应的设定：
"browserslist": [
"last 2 version" , 所有浏览器 兼容 最新的2个版本
"FireFox > 90" , 单独设定 火狐浏览器 兼容 90以上版本
"IOS > 9" 单独设定 苹果浏览器 兼容 9以上版本
]
打包压缩css程序代码，cmd命令：npm i -D gulp-cssmin
2-3 JavaScript文件，打包压缩需要的依赖包
将其他版本的JavaScript语法转化为 ES5 语法，cmd命令：
npm i -D gulp-babel
npm i -D @babel/preset-env
npm i -D @babel/core
将ES5语法的JavaScript程序打包压缩，cmd命令：npm i -D gulp-uglify
如果js程序中有promise 和 async await，需要再多加一个js配置文件，cmd命令：polyfill.js
2-4 html文件 打包压缩需要的依赖包，cmd命令：npm i -D gulp-htmlmin
2-5 sass文件 打包压缩需要的依赖包
2-5-1 下载全局node-sass 依赖包，cmd命令：npm i -g node-sass
如果能直接下载成功最好，如果下载失败需要配置专门的下载地址：npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ 先清除node下载缓存，再次执行cmd命令：npm i -g node-sass
2-5-2 下载sass开发依赖包，cmd命令：npm i -D gulp-sass@4.0.0
2-6 下载gulp服务器相关依赖包，cmd命令：npm i -D gulp-webserver
2-7 下载删除程序相关依赖包，cmd命令：npm i -D del
如果 多个依赖包的安装方式相同 可以 一次下载多个依赖包，cmd命令 ：
npm i -D gulp gulp-autoprefixer gulp-cssmin gulp-babel @babel/preset-env @babel/core gulp-uglify gulp-htmlmin gulp-webserver del gulp-sass@4.0.0
最终下载完成是两个全局依赖包 gulp node-sass，11个 开发依赖包。
安装配置gulp文件
gulp程序 打包压缩配置文件的 设定 每个项目 基本都是相同的，只有 配置参数 文件路径 有可能不同，打包规范原则 基本都是相同的。
gulp文件的步骤
1、在项目文件夹 src 中，创建一个固定的文件gulpfile.js，gulp规定的专门设定gulp打包压缩程序的文件名称。
2、在 gulpfile.js 文件中 定义 gulp打包压缩程序
2-1 导入下载的依赖包，导入加载依赖包 只需要 导入gulp-babel，gulp-babel 会 自动导入 加载@babel/preset-env @babel/core
2-2 根据 不同的文件类型 设定不同的打包压缩配置文件
需要 打包压缩有 css、js、html、sass
不需要 打包压缩有 图片、音频、视频、后端程序
gulpfile.js文件的代码
//1 导入加载 依赖包
//gulp开发依赖包
const gulp = require('gulp');
//css开发依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
//js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
//html开发依赖包
const htmlmin = require('gulp-htmlmin');
//sass开发依赖包
const sass = require('gulp-sass');
//服务器开发依赖包
cosnt webserver = require('gulp-webserver');
//删除开发依赖包
const del = require('del');
//2 不同类型文件的打包压缩规范
//2-1 需要压缩的文件]
//2-1-1 css文件
const cssHandler = function(){
return gulp.src('.src/css/*.css').pipe( autoprefixer() ).pipe( cssmin() ).pipe( gulp.dest('./dist/css') );
}
//2-1-2 js文件
const jsHandler = function(){
return gulp.src('./src/js/*.js').pipe( babel({ presets : ['@babel/env'] }) ).pipe(
uglify() ).pipe( gulp.dest('./dist/js') );
}
//2-1-3 html文件
const htmlHandler = function(){
return gulp.src('./src/page/*.html').pipe( htmlmin({
removeAttributeQuotes : true ,
removeComments : true ,
removeScriptTypeAttributes : true ,
removeStyleLinkTypeAttributes : true ,
collapseBooleanAttributes : true ,
collapseWhitespace : true ,
minifyCSS : true ,
minifyJS : true ,
}) ).pipe( gulp.dest('./dist/pages') );
}
//2-1-4 sass文件
const sassHandler = function(){
return gulp.src('.src/sass/*.scss').pipe( sass() ).pipe( autoprefixer() ).pipe(
cssmin() ).pipe( gulp.dest('./dist/css') );
}
//2-2 不需要打包压缩的文件
//直接存储到指定的文件夹中
//2-2-1 图片文件
cosnt imgHandler = function(){
return gulp.src('./src/message/*.*').pipe( gulp.dest('./dist/message') );
}
//2-2-2 后端文件
const phpHandler = function(){
return gulp.src('./src/server/*.php').pipe( gulp.dest('./dist/server') );
}
//2-2-3 工具文件
const toolsHandler = function(){
return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}
//3 设定监听程序
const watchHandler = function(){
gulp.watch('./src/css/*.css' , cssHandler );
gulp.watch('./src/js/*.js , jsHandler');
gulp.watch('./src/pages/*.html' , htmlHandler);
gulp.watch('./src/sass/*.scss' , sassHandler);
gulp.watch('./src/message/*.*' , imgHandler);
gulp.watch('./src/server/*.php' , phpHandler);
gulp.watch('./src/tools/**' , toolsHander);
}
//4 删除规范设定
//gulp.dest() 只有生成文件的功能 没有删除文件的功能
const delHandler = funtion(){
return del( ['./dist'] );
}
//6 gulpfile.js 文件的运行方式
//导出默认程序
//导出的默认程序中按照 顺序执行 设定的函数程序
module.exports.default = gulp.series(
//1、先删除之前打包压缩内容
delHandler,
//2、在执行新的打包压缩，让压缩文件内容和当前源文件内容同步
gulp.parallel(cssHandler , jsHandler , htmlHandler , sassHandler , imgHandler , phpHandler , toolsHandler ),
//执行服务器规范 运行服务器
webserverHandler,
//对指定的文件执行监听语法
watchHander,
)
有详细注释的代码，如下所示：
gulp.src('路径')
是 gulp 依赖包 自带的函数程序
按照路径 读取导入 指定文件的文件内容
*.css 文件名是任意名称 扩展名是 css 的文件
*.* 文件名是任意名称 扩展名是 任意名称
只 读取文件 不会 读取 文件夹
** 读取所有文件和文件夹的全部内容
gulp.dest('路径')
将 文件内容 按照指定的路径 存储
生成 文件名称和源文件相同的
执行过打包压缩之后的新的文件
.pipe( )
和 gulp.src() 配合使用的
gulp.src() 读取文件内容
.pipe() 操作 读取的文件内容
一般 操作内容是 打包压缩规范 和
gulp.watch( 参数1 , 参数2 )
是 gulp 依赖包 自带的函数程序
按照设定 对 指定的文件 执行 监听
当 指定文件内容改变时 执行 设定好的 打包压缩规范
参数1 设定的监听文件路径
参数2 监听文件内容改变时 触发执行的 打包压缩规范
设定的必须是 打包压缩规范的 函数名称
gulp.series( 参数1 , 参数2 .... )
是 gulp 依赖包 自带的函数程序
按照 顺序 执行 设定的函数程序
gulp.parallel()
是 gulp 依赖包 自带的函数程序
按照 同时 执行 设定的函数程序
del([路径1,路径2...])
按照 路径 删除文件
路径是 以 数组的形式设定
文件存在 删除 不存在就不会删除
module.exports.default = 函数程序
使用模块化开发语法
定义 当期 gulpfile.js 文件 导出的程序内容
设定之后 再 调用 gulfile.js 文件
就可以直接使用 gulp 命令
// 1 导入加载 依赖包
// gulp开发依赖包
const gulp = require('gulp');
// css开发依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
// js开发依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// html开发依赖包
const htmlmin = require('gulp-htmlmin');
// sass开发依赖包
const sass = require('gulp-sass');
// 服务器开发依赖包
const webserver = require('gulp-webserver');
// 删除开发依赖包
const del = require('del');
// 2, 不同类型文件的打包压缩规范
// 2-1 需要 压缩的文件
// 2-1-1 css文件
const cssHandler = function(){
return gulp.src('./src/css/*.css') // 按照指定的路径读取文件内容
.pipe( autoprefixer() ) // 对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe( cssmin() ) // 将 添加前缀之后的文件内容 压缩
.pipe( gulp.dest('./dist/css') ); // 按照指定的路径存储文件 生成的压缩文件名称 和 源文件名称相同
}
// 2-1-2 js文件
const jsHandler = function(){
return gulp.src('./src/js/*.js') // 按照路径导入js文件内容
.pipe( babel( { presets : ['@babel/env'] } ) ) // 转化为ES5语法格式
.pipe( uglify() ) // 压缩转化的ES5格式的JavaScript程序
.pipe( gulp.dest('./dist/js') ); // 存储到指定的文件夹中
}
// 2-1-3 html文件
const htmlHandler = function(){
return gulp.src('./src/pages/*.html')
.pipe( htmlmin({ // 在 htmlmin() 中 以 对象的形式 设定html文件 打包压缩配置
removeAttributeQuotes : true , // 删除属性中的双引号
removeComments : true , // 删除注释
// removeEmptyAttributes : true , // 删除 空属性
// removeEmptyElements : true , // 删除 空标签
removeScriptTypeAttributes : true , // 删除 script标签 type属性
removeStyleLinkTypeAttributes : true , // 删除 link标签 style标签 type属性
collapseBooleanAttributes : true , // 删除 布尔属性的属性值
collapseWhitespace : true , // 删除 标签之间的空
minifyCSS : true , // 压缩内部式 css语法
minifyJS : true , // 压缩内部式 js语法
}))
.pipe( gulp.dest( './dist/pages' ) )
}
// 2-1-4 sass文件
const sassHandler = function(){
return gulp.src( './src/sass/*.scss' ) // 按照指定路径读取sass文件内容
.pipe( sass() ) // 将读取的sass文件内容 编译成 css文件
.pipe( autoprefixer() ) // 对 gulp.src() 读取的文件内容 按照 package.json 设定的配置 自动添加前缀
.pipe( cssmin() ) // 将 添加前缀之后的文件内容 压缩
.pipe( gulp.dest('./dist/css') ) // 将 打包压缩的文件存储到css文件夹中
}
// 2-2 不需要打包压缩的文件
// 直接存储到指定的文件夹中
// 2-2-1 图片文件
const imgHandler = function(){
return gulp.src( './src/message/*.*' ) // 按照指定路径读取文件内容
.pipe( gulp.dest( './dist/message' ) ) // 直接存储到指定的文件夹中
}
// 2-2-2 后端文件
const phpHandler = function(){
return gulp.src( './src/server/*.php' ) // 按照执行路径读取文件内容
.pipe( gulp.dest( './dist/server' ) ) // 直接存储到指定文件夹中
}
// 2-2-3 工具文件
const toolsHandler = function(){
return gulp.src('./src/tools/**')
.pipe( gulp.dest( './dist/tools' ) )
}
// 3, 设定监听程序
const watchHandler = function(){
// 设定css的监听程序 当 参数1 路径 指定的css 文件内容改变时 执行 cssHandler 压缩规范
// 如果 有 promise程序执行 html文件中 需要导入 polyfill.js
gulp.watch( './src/css/*.css' , cssHandler );
gulp.watch( './src/js/*.js' , jsHandler );
gulp.watch( './src/pages/*.html' , htmlHandler );
gulp.watch( './src/sass/*.scss' , sassHandler );
gulp.watch( './src/message/*.*' , imgHandler );
gulp.watch( './src/server/*.php' , phpHandler );
gulp.watch( './src/tools/**' , toolsHandler );
}
// 4, 删除规范设定
// gulp.dest() 只有 生成文件的功能 没有删除文件的功能
const delHandler = function(){
return del( [ './dist' ] );
}
// 5, 服务器规范
// 当前只是简单的写一个服务器效果
// 不是完整的服务器 不能 运行我们的项目文件
// 只是为了向大家展示 服务器的 热启动 功能
const webserverHandler = function(){
return gulp.src( './dist' ) // 读取压缩文件内容
.pipe( webserver({ // 以对象的语法形式 配置服务器设定
host : '127.0.0.1', // 服务器地址
port : '8088' , // 服务器端口号
open : './pages/index.html', // 设定默认打开的页面路径 是从 src() 导入的路径开始的相对路径
livereload : true , // 开启 服务器的热启动 导入文件内容有改变 服务器自动刷新
}))
}
// 6, gulpfile.js 文件的运行方式
// 导出 默认 程序
// 导出的默认程序中 按照 顺序 执行 设定的 函数程序
// 1 delHandler 删除原始打包压缩的文件
// 2 gulp.parallel( cssHandler ) 先执行初始的打包压缩
// 3 watchHandler 执行设定的监听程序
module.exports.default = gulp.series(
// 先 删除 之前打包压缩内容
delHandler ,
// 在 执行 新的打包压缩 让压缩文件内容和当前源文件内容同步
gulp.parallel( cssHandler , jsHandler , htmlHandler , sassHandler , imgHandler , phpHandler , toolsHandler ) ,
// 执行 服务器规范 运行服务器
// webserverHandler ,
// 对 指定的文件 执行 监听语法
watchHandler ,
)
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
