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 相关文章推荐
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
Jan 15 PHP
php 什么是PEAR?(第二篇)
Mar 19 PHP
比较详细PHP生成静态页面教程
Jan 10 PHP
PHP 如何获取二维数组中某个key的集合
Jun 03 PHP
php设置页面超时时间解决方法
Sep 22 PHP
Zend Framework教程之Resource Autoloading用法实例
Mar 08 PHP
Yii中srbac权限扩展模块工作原理与用法分析
Jul 14 PHP
PHPTree――php快速生成无限级分类
Mar 30 PHP
Laravel框架学习笔记之批量更新数据功能
May 30 PHP
laravel 实现设置时区的简单方法
Oct 10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
Oct 12 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
Oct 15 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 split汉字
2009/06/05 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript中的其他对象
2008/01/16 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
企业指导教师评语
2014/04/28 职场文书
教师节学生演讲稿
2014/09/03 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
PHP获取学生成绩的方法
2021/11/17 PHP
canvas实现贪食蛇的实践
2022/02/15 Javascript
Python if else条件语句形式详解
2022/03/24 Python