Laravel利用gulp如何构建前端资源详解


Posted in PHP onJune 03, 2018

什么是gulp?

gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的异同点

易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。

高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。

高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。

易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。

引言

最近把自己主页前端代码进一步规范了,使用 npm 引入一些前端的资源库,在 Laravel 5.5 中使用 gulp 遇到一些坑。

mix.sass 无法直接使用 node_modules 文件夹里的,只能用 resource/assets/sass/app.scss 这个文件生成 css,然后和其他的 css 合并为一个文件。

mix.scripts 可以使用 node_modules 文件夹里的 js,并和自己的 js 合并为一个文件。

mix.copy 可以复制 node_modules 中的文件到指定的目录,比如字体。

mix.version 可以给合并后的文件增加版本号。

贴出我最终的配置如下:

elixir(function (mix) {
 mix.sass([
  'app.scss'
 ], 'public/css')
  .styles([
   './public/css/app.css',
   'style.css',
   'pill.css',
  ], 'public/css/site.css')
  .styles([
   './public/css/app.css',
   'cover.css',
  ], 'public/css/cover.css')
  .scripts([
   './node_modules/jquery/dist/jquery.min.js',
   './node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
   'scrollerup.js'
  ],'public/js/app.js')
  .copy([
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2'
  ], 'public/build/fonts/bootstrap')
  .version([
   'public/css/cover.css',
   'public/css/site.css'
  ]);
});

以上代码出自我的 gulpfile.js 文件。

Laravel利用gulp如何构建前端资源详解

运行 gulp 命令,线上运行 gulp ?production.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
php+iframe实现隐藏无刷新上传文件
Feb 10 PHP
PHP读取PDF内容配合Xpdf的使用
Nov 24 PHP
ThinkPHP多表联合查询的常用方法
Mar 24 PHP
跟我学Laravel之视图 & Response
Oct 15 PHP
基于php的CMS中展示文章类实例分析
Jun 18 PHP
高质量PHP代码的50个实用技巧必备(下)
Jan 22 PHP
smarty模板数学运算示例
Dec 11 PHP
PHP面向对象程序设计方法实例详解
Dec 24 PHP
详解PHP防止直接访问.php 文件的实现方法
Jul 28 PHP
PHP中引用类型和值类型功能与用法示例
Feb 26 PHP
ThinkPHP 5.x远程命令执行漏洞复现
Sep 23 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
Sep 30 PHP
PHP学习记录之数组函数
Jun 01 #PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
Jun 01 #PHP
PHP+MySQL实现模糊查询员工信息功能示例
Jun 01 #PHP
php post json参数的传递和接收处理方法
May 31 #PHP
PHP调用接口用post方法传送json数据的实例
May 31 #PHP
ThinkPHP5 验证器的具体使用
May 31 #PHP
php 截取中英文混合字符串的方法
May 31 #PHP
You might like
php 伪静态之IIS篇
2014/06/02 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python网络编程详解
2017/10/31 Python
django 信号调度机制详解
2019/07/19 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Python Django获取URL中的数据详解
2021/11/01 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库