- 1. Gulp构建前端自动化
使用gulp构建PHP传统项目中的前端代码
下载
node安装: https://nodejs.org/en 打开命令安装gulp-cli环境：npm install gulp-cli -g
文档地址：https://www.gulpjs.com.cn/
在通过gulp.src()匹配要打包的文件路径后可以链式调用pipe()管道函数。一切代码压缩处理输出都是在管道函数中完成。
gulp.src：匹配路径gulp.dest：输出路径gulp.watch：监听文件变化执行指定任务gulp.series：按顺序执行多个任务，前面任务执行完成才进行下一个任务。gulp.parallel：多个任务并行执行，嵌套组合的深度没有强制限制。
const { src, dest, watch,series} = require('gulp');
//匹配`input/`路径下的所有`js`文件，输入出到`output`目录下
function copyTask() {
return src('input/*.js')
.pipe(dest('output/'));
}
//监听`input/`目录下的`js`如果有修改执行`copyTsk`任务。
function watch(){
watch('input/*.js', copyTask);
}
exports.default = series(copyTask);把scss文件打包成css文件。
安装：
pnpm add -D sass gulp-sass 使用：
const sass = require('gulp-sass')(require('sass'));
//创建打包scss任务
function scssTask() {
return src('./src/*.scss').
pipe(sass()).
pipe(dest('./output/'))
}给css压缩。
安装：
pnpm add -D gulp-clean-css使用：
const cleanCSS = require('gulp-clean-css');
//创建打包scss任务
function cssTask() {
return src('./src/*.css').
pipe(cleanCSS()).
pipe(dest('./output/'))
}给css代码添加浏览器兼容前缀。
由于高版本无法正常用
require导入。
安装：
pnpm add -D gulp-autoprefixer@8.0.0使用：
const autoPrefixer = require('gulp-autoprefixer');
//配置浏览器参数："last 3 version", "safari 5", "ie 8", "ie 9"
function cssTask() {
return src('./src/*.css').
pipe(autoPrefixer("last 3 version", "safari 5", "ie 8", "ie 9")).
pipe(dest('./output/'))
}压缩HTML并对静态代码划分一个个文件组件（公共模板）
gulp-htmlmin：压缩html代码。gulp-file-include：讲静态html划分成一个个模板。
安装：
pnpm add -D gulp-htmlmin
pnpm add -D gulp-file-include使用：
| 参数 | 类型 | 说明 |
|---|---|---|
collapseWhitespace |
Boolean |
html压缩成一行 |
minifyJS |
Boolean,Object,Function |
压缩html中的script,可以用UglifyJS插件配置打包js,默认只能压缩ES5语法 |
minifyCSS |
Boolean,Object,Function |
压缩html中的style,可以用cleanCSS插件配置打包css |
removeComments |
Boolean |
删除html中的所有注释 |
trimCustomFragments |
Boolean |
修剪周围空格 |
ignoreCustomFragments |
arry[] |
允许在匹配时忽略某些片段的正则表达式数组（例如<?php ... ?>、{{ ... }}等） |
定义公共模板引入
| 参数 | 类型 | 说明 |
|---|---|---|
prefix |
string |
定义匹配语法：@@include('./component/footer.html') |
basepath |
string |
@file：相对文件路径匹配模板。@root：包含相对于 gulp 运行目录的文件。path/to/dir：包含相对于您提供的基本路径的文件。 |
模板传递参数以及更详细参数配置：https://www.npmjs.com/package/gulp-file-include
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const fileinclude = require('gulp-file-include');
function htmlTask() {
return src('./src/*.html')
.pipe(
fileinclude({
prefix: '@@',
basepath: '@file',
})
)
.pipe(htmlmin({
collapseWhitespace: true, //html压缩成一行
minifyJS: true, //压缩内嵌js无法压缩ES6语法
minifyCSS: cleanCSS({ compatibility: 'ie8' }), //压缩html中的css
removeComments: true, //删除html中的注释
removeEmptyAttributes: true, //删除包空的节点属性
trimCustomFragments: true, //修剪周围空格
ignoreCustomFragments: [/\{\{(.+?)\}\}/g], //允许在匹配时忽略某些片段的正则表达式数组（例如<?php ... ?>、{{ ... }}等）
})).
pipe(dest('./output/'))
}压缩和转换JavaScript代码。
gulp-uglify：压缩ES5代码。babel：负责转换ES6或者更高版本js为低版本。@babel/preset-env：基于babel的一个预设用于处理js兼容以及浏览器配置。通常和babel组合使用。
安装：
pnpm add -D gulp-uglify
pnpm add -D babel
pnpm add -D @babel/preset-env使用：
function jsTask() {
return src('input/*.js')
.pipe(
babel({
presets: ['@babel/env'],
})
)
.pipe(
uglify({
output: {
ascii_only: true, //把中文转换成Unicode编码
},
})
)
.pipe(dest('./output/'));
}配置一个本地服务器。
安装：
pnpm add -D gulp-webserver使用：
| 参数 | 类型 | 说明 |
|---|---|---|
livereload |
Boolean |
文件修改自动刷新 |
host |
string |
配置域名 |
port |
nubmer |
配置端口 |
open |
string |
配置自动打开某个页面 |
const webserver = require('gulp-webserver');
function server() {
return src('/').pipe(
webserver({
livereload: true, //文件修改自动刷新
host: 'localhost',
port: 9900,
open: '/app/view/home/index.html', //要打开的页面，指向打包成功后的文件目录
})
);
}打包node_modules中的依赖模块到指定目录中。
安装：
pnpm add -D gulp-npm-dist使用：
const npmDist = require('gulp-npm-dist');
//自动打包依赖
function atuoRelyTask() {
return src(npmDist(), { base: './node_modules/' }).pipe(
dest('./output/lib')
);
}gulpif：根具条件执行对应函数或任务。cross-env：配置环境变量，根据环境变量打包对应任务gulp-replace：字符串替换插件，可使用正则匹配替换。
安装：
pnpm add -D gulp-replace
pnpm add -D gulp-if
pnpm add -D cross-env使用：
修改打包模式下替换路径中的access为/。
const replace = require('gulp-replace');
const gulpif = require('gulp-if');
//自动打包依赖
function atuoRelyTask() {
return src('input/*.html')
.pipe(
gulpif(
process.env.NODE_ENV === 'production',
replace(/\/access\//g, '/')
)
)
.pipe(
dest('./output/lib')
);
}"scripts": {
"build": "cross-env NODE_ENV=production gulp",
"dev": "cross-env NODE_ENV=preproduction gulp"
}运行命令：
pnpm build # 打包模式
pnpm dev # 开发模式在gulpfile.js使用：
production：打包模式preproduction：开发者模式
// env === 'production' || env===preproduction
const env= process.env.NODE_ENV压缩后的代码定位到源文件中的代码位置
安装：
pnpm add -D gulp-sourcemaps使用：
function jsTask() {
return src('input/*.js')
.pipe(sourcemaps.init())
.pipe(
babel({
presets: ['@babel/env'],
})
)
.pipe(
uglify({
output: {
ascii_only: true, //把中文转换成Unicode编码
},
})
)
.pipe(sourcemaps.write())
.pipe(dest('./output/'));
}