laravel与front-end
准备工作
在此之前要安装node 、 npm 。这里安装node 、 npm 就不介绍了,百度一大把。
安装所有的npm依赖包
//进入项目的根目录
npm install
安装完后会出现一个node_modules目录
使用gulp编译sass
npm安装gulp(如果没有翻墙呢,那么很多包安装安装不了得)
//全局安装
npm intall --global gulp
// 项目中安装
npm install --save-dev gulp
不过建议用淘宝镜像安装gulp,可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
用淘宝的cnpm安装gulp(用了这个感觉速度超快)
cnpm install gulp
在此可以做一个示例,在 resource/assets/sass/app.scss 文件中去掉第一行的注释符,如下图:
在控制台进行编译,显示已编译成功:
打开public/css/文件, 可知有一个app.css文件,说明编译成功:
如果想编译多个sass文件时,可以在gulpfile.js文件中修改至如下代码:
// 编译道不同的文件中
elixir(function(mix) {
mix.sass('app.scss','public/css/first.css')
.sass('two.scss','public/css/two.css');
}); // 编译到同一个文件中
elixir(function(mix) {
mix.sass(['app.scss','two.scss'],'public/css/first.css')
});
结果如下图:
使用gulp编译less文件
less的编译跟scss的编译非常相同,只需要给scss改为less即可,
elixir(function(mix) {
mix.less('app.less','public/styles');
// .sass('two.scss','public/css/two.css');
});
需要注意的一点就是,在编译的是候会默认的去resource/less文件路径,因此在编译之前需要改文件名,新建也可。
如果想自己配置文件less或scss文件的 路径可以添加如下代码,编译时,就会到配置的文件中去找资源:
gulp结果:
从上图提示的错误就可以知道配置的文件路劲起作用了。
合并压缩静态文件
//elixir.config.assetsPath = 'assets'; elixir(function(mix) {
// mix.less('app.less','public/styles');
// .sass('two.scss','public/css/two.css');
mix.styles(['a.css','b.css']);
mix.scripts('js.js');
});
gulp 结果:
可知并未起到压缩结果,只是把几个文件合并为一个文件
如果要起到压缩得结果来提高加载速度:
gulp --production
laravel 解决缓存问题
在开发中,当我们更新了某个文件时,而本地又有缓存,因此得不到最新的效果。那如和解决这一个问题呢?
第一种:
手动得在链接地址添加 version 参数。并设置值,这样浏览器就知道更新
第二种:
在gulpfile.js中添加 version()方法并传入文件的路径
elixir(function(mix) {
mix.styles(['a.css','b.css']).version('/css/all.css');
});
gulp下,在public文件夹下多了个build文件,同时也产生了一个hash文件
打开文件可知,在模板中,hash问价才是我们要引入的文件,只需在加载文件时,利用 elixir 方法即可
在浏览器中我们也可以检测到,成功加载
因此,在每次版本更新时,我们只需 gulp 下 就可以得到最新版本
yarn的使用及其简介
百度yarn pk npm ,总体来说,yarn 比npm 更优越,
并行安装
清晰的输出
安装的时候无法保证速度/一致性
安全问题,因为 npm 安装时允许运行代码
功能差异 , Yarn 与 npm 很类似,但通过引擎的对比就能察觉 Yarn 的不同
安装可以参考官网 yarn安装
同时记得 PHP>5.6.4
我要去升级服务器了 , 太low了。
laravel与front-end的更多相关文章
- Laravel与Repository Pattern(仓库模式)
为什么要学习Repository Pattern(仓库模式) Repository 模式主要思想是建立一个数据操作代理层,把controller里的数据操作剥离出来,这样做有几个好处: 把数据处理逻辑 ...
- laravel中如何写验证码文件,并防止中文乱码.
本例为生成中文验证码,专为laravel而生. //控制器: public function getVcode(Request $request){ $width=845; $height=125; ...
- laravel/laravel和laravel/framework有何区别?
在安装laravel的时候,我们一般是download github上的laravel/laravel,随后执行composer install,在这个过程中,你会发现composer其中的一项工作是 ...
- Laravel学习笔记(一)
根据国外的调查,Laravel是最流行的框架,最近公司需要PHP的开发人员,但是一直招不到人,只好亲自上阵研究一下.由于以前对PHP只是大致了解,这次学习开始的时候也挺挠头的,到今天稍微入了 ...
- laravel前后台路由分离
在laravel中创建文件放置前台和后台控制器 找到app/providers/RouteServiceProvider.PHP文件 在内配置 例: <?php namespace App\Pr ...
- laravel常见异常解决
requested URL not found http://stackoverflow.com/questions/21458080/the-requested-url-projectname-us ...
- 【nginx,apache】thinkphp ,laravel,yii2开发运行环境搭建
缘由 经常会有人问xx框架怎么配置运行环境,这里我就给贴出吉祥三宝(Yii2,Laravel5,Thinkphp5 )的Nginx和Apache的配置,供大家参考 Nginx Yii2 server ...
- php Laravel 框架之建立后台目录
今天研究了在Laravel框架中的控制器中加入后台的目录.发现了一些小的规律,拿来和大家分享一下吧. 通常情况下,我们是直接在controllers目录中加入我们的控制器,然后再routes.php ...
- Linux laravel安装
第一步:安装php套件 目前为止laravel是5.1版本,需要对php有要求,要php5.59以上 The Laravel framework has a few system requiremen ...
- Laravel 精选资源大全
原文链接 必备品 文档:Documentation API:API Reference 视频:Laracasts 新闻:Laravel News 中文文档 Laravel学院– Laravel 5. ...
随机推荐
- 帮你彻底解决eclipse(myeclipse)中写struts.xml配置文件
其实,在自己写struts.xml的时候,竟然没有代码提示功能.让我非常的烦恼,其实解决这个问题的关键还是system不知道他的dtd的规则无法提示配置信息 很简单,那就让它知道就OK了!!! 道理明 ...
- Spring和MyBatis整合
前言:在前面一篇文章中,介绍了单独使用MyBatis连接orace的例子,在这里分享学习下Spring和MyBatis是如何整合的,以具体工程为例子 阅读目录: 1.环境准备 2.搭建工程 2.1.a ...
- 关于app集成支付宝应用内支付的问题总结
pem文件生成,将合作伙伴密钥复制到notepad++中,每45个字符回车,去除空格,头尾加上标题,文件需保存为无BOM的UTF8格式,就OK. 可以每行64个字符,共216个字符. 近来处理了 ...
- selenium - css 定位
前言: CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的表现. CSS 使用选择器来为页面元素绑定属性.这些选择器可以被 selenium ...
- Linux 驱动层实现阻塞和非阻塞
linux应用层的函数默认是阻塞型的,但是要想真正实现阻塞,还需要驱动的支持才行. 例:open().scanf().fgets().read().accept() 等 1.默认情形,驱动层不实现阻塞 ...
- 字符串(PHP学习)
1.什么是字符串 答:一串字符组成(参考羊肉串) 2.字符串定义 答:单引号,双引号,包含单引号或双引号的字符串(1.双引号里面有单引号2.单引号里面有双引号3.转义4.字符拼接) 3.单双引号定义字 ...
- CAN总线优点
废除传统的站地址编码,代之以对通信数据块进行编码,可以多主方式工作: 采用非破坏性仲裁技术,当两个节点同时向网络上传送数据时,优先级低的节点主动停止数据发送,而优先级高的节点可不受影响继续传输数据,有 ...
- git问题记录
1.从远程仓库拉取A文件,在本地删掉了这个A文件,然后再去拉取远程仓库,是拉不下来的,因为本地版本库比远程库的高 我觉得是第一次远程的版本已经拉取了,本地已记录,远程程没有发生变化,在拉取和先前的一致 ...
- Lua调用C++带参数的方法
C++代码: // LuaAndC.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #i ...
- JavaScript笔记——BOM的操作和浏览器的检测
BOM的操作 BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,就可能存在浏览器不兼容的情况,那么浏览器共有对象就成了事实的 ...