6. 管理你的css和js文件 - 从零开始学Laravel
从零开始学laravel教程目录
在Laravel中我们可以直接将css和js文件放在app/public
目录下,不过在正式项目开发中我们可能会使用Sass, Less, Stylus,Browserify等css和js预处理器,而laravel自带的基于gulp任务的Laravel Elixir都能支持它们。
到这里,我们已经比较熟悉的知道了最简单的开发流程,在route.php
编写路由,路由会指向到一个控制器类中的一个方法,在这个方法中,加载对应的视图和传递数据给视图,视图层在继承layout.balde.php文件。就是那么的简单。
我们现在来打开layout.balde.php
文件,修改里面的内容如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>布局文件</title><link rel="stylesheet" href="/css/style.css">@yield('header')
</head>
<body>@yield('content')@yield('footer')
</body>
</html>
上面文件的我们加了一句导入css的代码<link rel="stylesheet" href="/css/style.css">
,我们在app/public
下建立css/style.css
的css文件,我们给body标签加个粉色背景,如下:
效果如下:
如果要加载js文件,那也是相同的做法.
上面我们说过正式开发项目的时候,都会使用下Sass,Less,Stylus这些预处理器,我们看下在Laravel中怎么使用它们.
我们打开项目根目录下的gulpfile.js
,看里面的这段脚本:
elixir(function(mix) {mix.sass('app.sass'); // laravel默认写的是app.scss,我比较喜欢写成app.sass,这里我改过来了
});
laravel自带的elixir能让我们很轻易的就能使用sass,less了,比如你要用sass,laravel默认已经帮我们写好了,如果你要用less呢,那只要这么写就行
elixir(function(mix) {mix.less('app.less');
});
在根目录下还有一个package.json
的文件,我们需要通过npm
来安装这些依赖,首先你要保证你的电脑上已经安装了node,我们可以使用node -v
来看一下:
➜ node -v
v7.0.0➜ npm -v
3.10.8
如果你还没有安装node, 那么在mac系统中你可以简单的使用brew install node
来安装它,或者你也可以访问node的官网查看下怎么安装。
安装完node后,我们来安装下依赖,我们知道安装php的包依赖我们用composer install
, 那安装node的依赖也是相同的道理,使用npm install
即可
➜ cd /usr/local/var/www/Laravel52 # 进入项目的根目录
➜ npm install # 安装node依赖包
上面可能的安装可能需要个几分钟,安装完成后,这些第三方包都会被放置在项目根目录下的node_modules
中。因为这些第三方包我们在开发的时候是不能去更改它们的代码的,所以没有必要放置在sublime编辑器中,我们可以忽略显示它。在sublime中按住command + ,(逗号)
调出sublime的配置文件,然后将下面这些内容放到配置文件中:
"folder_exclude_patterns":["node_modules","vendor",],
保存即可:
我们的app.sass
文件在resources/assets/sass
中,我们在app.sass
中写点测试代码:
$color: blue
bodycolor: $color
我们执行下gulp
,刚才我忘记将gulp进行全局安装了,我们先安装下:
npm install -g gulp
在项目根目录执行gulp
➜ gulp
[14:43:33] Using gulpfile /usr/local/var/www/Laravel52/gulpfile.js
[14:43:33] Starting 'default'...
[14:43:33] Starting 'sass'...Fetching Sass Source Files...- resources/assets/sass/app.sass Saving To...- public/css/app.css #这里是编译好的css路径[14:43:35] Finished 'default' after 1.6 s
[14:43:35] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:43:35] Finished 'sass' after 1.76 s
编译好的app.css文件会放置在public/css/
路径中, 如下:
上面的css没有经过压缩,发布上线的时候需要压缩下,我们可以用gulp --production
来执行,执行后的app.css
内的代码会变压缩成这样:
body{color:blue}
如果想给编译号的文件加上版本号,将gulpfile.js
的内容这么修改一下:
elixir(function(mix) {mix.sass('app.sass').version('css/app.css');
});
从新gulp
后,在public/build/css
看到文件名变成类似app-edd03786db.css
这样了。
下面我们将layout.blade.php
中换上我们现在的css路径:
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
ok,这样就可以了,大家自己去运行一下。
如果是在做前端开发的时候,想要时时的编译css和js,那可以使用
gulp watch
当你修改代码保存的时候就会自动编译一下。
好的,本节就到这里。
6. 管理你的css和js文件 - 从零开始学Laravel相关推荐
- 解决修改css或js文件,浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并 ...
- yii引入php文件,Yii2框架中CSS、JS文件引入要领_PHP开发框架教程
在yii2中,因为yii2版本升级致使了,许多yii2的用法跟yii1有着很大的区分,这几天一直在view层的视图界面徜徉着,碰到什么问题呢? (引荐进修:yii框架) 问题就是搞不清我该怎样去引入C ...
- php ci框架中载入css和js文件失败的原因及解决方法
在将html页面整合到ci框架里面的时候,载入css和js失败.原因是ci框架是入口的框架 对框架中文件的全部请求都须要经过index.php处理完毕,当载入外部的css和js文件的时候要使 用bas ...
- yii 加载php文件,Yii2框架加载css和js文件的方法分析
本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 ...
- ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) {var head = document.getElementsByTagNa ...
- django里面的css无法加载,django使用admin后台,一部分 css和js文件无法加载-无法打开文件...
解决使用admin功能时, 一部分 css和js文件无法加载 原因是由settings.py修改debug = true 为 debug =false 引起的, 1.在settings.py添加如下 ...
- gulp压缩整合css和js文件
gulp压缩整合css和js文件 原创 dadaDaShiXiong 最后发布于2018-09-18 14:28:38 阅读数 1164 收藏 发布于2018-09-18 14:28:38 版权声明: ...
最新文章
- KNN分类器、最近邻分类、KD树、KNN分类的最佳K值、基于半径的最近邻分类器、KNN多分类、KNN多标签分类、KNN多输出分类、KNN分类的优缺点
- 1106C程序语法树
- Android应用点击两次back退出
- 无索引的亿级数据该如何删除?
- ASP.NET MVC:4 Ways To Prevent Duplicate Form Submission(转载)
- Informix IDS 11系统经管(918考试)认证指南,第 5 部分: 数据库做事器行使(5)
- Php 比较字符串相似度
- 太赞了!性能超越谷歌MobileNet!ECCV2020重磅推出MobileNeXt !
- 关键时刻不可或缺的5款高科技紧急应用
- html css ps切图教程,PS网页切图和CSS布局方法教程:第二部份
- Flutter作插件的研究(学习)记录
- oracle怎么关联表查询语句,Oracle数据库的多表关联查询SQL语句
- 高三数学微课堂【教学视频】
- C# 调用中通快递查询物流轨迹接口
- 代码坏味道 之 17 狎昵关系 inappropriate intimacy
- win10关闭电池保护模式_win10系统Ie浏览器开启、关闭保护模式的操作方法
- html在线预览ppt excel,JavaScript实现Word、Excel、PPT在线预览
- Lua --Coscos从c++过渡到Lua
- Firefox全面兼容中国银联“在线支付”
- 成品直播源码推荐,登录界面实现插入背景
热门文章
- VOD, TVOD, SVOD FVOD的区别(转)
- C# Dictionary.Add(key,123) 与 Dictionary[key]=123的区别
- php通用检测函数集合
- Symantec Endpoint Protection 11 混乱的版本
- reactivecocoa button的几种点击方式
- mac idea用自带的maven还是_免费版的 IDEA 为啥不能使用 Tomcat ?
- Swift3.0语言教程删除字符与处理字符编码
- dw可以编辑java吗_为什么很多人说 Java 不适合编写桌面应用?
- 交换机和路由器的区别_路由器与交换机的区别?
- 2010 模板下载 罗斯文_俄罗斯人过年必看电影 | 新年枞树 @鱼子酱字幕组