laravel中使用gulp打包发布前端部分
时间:2022-05-07
本文章向大家介绍laravel中使用gulp打包发布前端部分,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗?当然,gulp可以做到。
gulp是什么?
看完你就明白,这是个自动化构建工具的核心就是gulpfile.js。 用于laravel的gulp怎么写? 把一切*.html换成*.blade.php就行了。
有什么坑要注意?
- 异步执行,前后依赖关系必须写明。比如: gulp.task('rev' , ['concatCss', 'concatJs'],function() { return gulp.src(['./rev/**/*.json', paths.html]) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 .pipe(revCollector( { replaceReved: true, dirReplacements: { 'css': 'css', 'js': 'js', } } )) .pipe(gulp.dest(dist)); }); 这里先异步执行concatCss和concatJs两个task,然后执行dev。
- 在对css和js文件拼接md5后缀的时候,要按照官方文档的方式来写。
最后附上gulpfile.js的代码:
var gulp = require('gulp');var uglify = require('gulp-uglify');var rev = require('gulp-rev');var revCollector = require('gulp-rev-collector');var cleanCSS = require('gulp-clean-css');var htmlmin = require('gulp-htmlmin');var paths = {
css: "css/*.css",
js: "js/*.js",
html: "./*.blade.php"};var dist = "./dist/"; //写的很简单,都发布到dist下。在laravel下可以配置不同文件类型的发布路径。gulp.task('compressHtml',['rev'],function () { var options = {
removeComments: true,//清除HTML注释
removeScriptTypeAttributes: true,//删除`<script>`的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除`<style`>和`<link>`的type="text/css"
minifyCSS: true,//压缩页面CSS
collapseWhitespace: true,
minifyJS: true,
}; return gulp.src(dist+'*.blade.php')
.pipe(htmlmin(options))
.pipe(gulp.dest(dist));
});
gulp.task('concatCss',function() { //- 创建一个名为 concat 的 task
return gulp.src(paths.css) //- 需要处理的css文件,放到一个字符串数组里
.pipe(rev()) //- 文件名加MD5后缀
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(dist+'css/')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev/css')); //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('concatJs', function() { //- 创建一个名为 concat 的 task
return gulp.src(paths.js) //- 需要处理的css文件,放到一个字符串数组里
.pipe(rev()) //- 文件名加MD5后缀
.pipe(uglify())
.pipe(gulp.dest(dist+"js/"))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev/js')); //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('rev' , ['concatCss', 'concatJs'],function() { return gulp.src(['./rev/**/*.json', paths.html]) //- 读取 rev-manifest.json 文件以及需要进行css,js名替换的文件
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: { 'css': 'css', //这里是把文件中的css换成别的字符串,可以拼接发布目录
'js': 'js', //道理同上
}
}
))
.pipe(gulp.dest(dist));
});
gulp.task('default', ['compressHtml']);
在命令行运行gulp default 然后去dist里面看看生成了什么吧。
- 这或许是对小白最友好的python入门了吧——7,组织列表
- 这或许是对小白最友好的python入门了吧——6,删除列表元素
- 集群开源软件赏:JGroups
- 看到他我一下子就悟了---委托
- 这或许是对小白最友好的python入门了吧——5,修改和添加列表元素
- 这或许是对小白最友好的python入门了吧——4,列表
- 【深度学习】自动驾驶:使用深度学习预测汽车的转向角度
- 这或许是对小白最友好的python入门了吧——3,数字处理
- 数据库恢复方案
- 这或许是对小白最友好的python入门了吧——2,变量和字符串
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)
- Linux 系统安全与优化配置
- Extjs 项目中常用的小技巧,也许你用得着(2)
- 这或许是对小白最友好的python入门了吧——16,输入文本
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 聊聊dubbo-go的DubboInvoker
- 如何在云开发Cloudbase中使用MySQL数据库
- Kubernetes笔记之基本概念
- 腾讯云语音识别之一句话识别
- 创建线程都有哪些方式?— Callable篇
- UiAutomator源码学习(3)-- UiObject
- RTSP协议视频流媒体播放器EasyPlayer-RTSP-OCX接口文档API接口函数定义
- Python逐行写入
- C++ this 指针
- C++ push方法与push_back方法
- 别人变强靠天赋,而我,靠思维导图
- Spring Boot 五种热部署方式
- 二叉树最小深度
- 一日一技:限定Python函数只能被特定函数调用
- 四种ABAP单元测试隔离(test isolation)技术