摘要:本節將學習是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊,不管該模塊之前是否安裝過由于國內墻的原因,使用安裝會非常緩慢,慢到想切,不過還好,我們可以使用淘寶提供的國內鏡像進行下載。
一、句法強大的樣式表Sass</>復制代碼
本節將學習 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。
Sass 是一種可用于編寫CSS的語言,借助 Sass 我們可以少寫很多CSS代碼,并使樣式代碼的編寫更加靈活多變,如可以按照Sass的語法使用變量,繼承父類樣式特點,等我們在Sass寫完樣式之后,然后使用gulp工具編譯,就可以生成CSS代碼文件。
1.樣式文件導入Sass 使用 @import來導入其它的樣式文件。如:
</>復制代碼
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
上面代碼將導入存放在 node_modules/bootstrap-sass/assets/stylesheets/bootstrap 文件夾中的所有樣式文件。你也可以使用下面代碼來對多帶帶一個文件進行導入:
</>復制代碼
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss";
2.變量
Sass支持在代碼中加入變量,所有的變量都以$開頭,這和PHP的變量命名方式一樣。
</>復制代碼
$navbar-color: #3c2e43;
.navbar-inverse {
background-color: $navbar-color;
}
上面代碼定義了一個 $navbar-color 顏色變量,在編譯成功之后,變量將被替代為它所對應的值。
3.嵌套Sass 還允許你在選擇器中進行相互嵌套,以減少代碼量。
4.引用父選擇器還可以在 Sass 嵌套中使用 & 對父選擇器進行引用:
</>復制代碼
a {
color: white;
}
a:hover {
color: blue;
}
使用嵌套,上邊的代碼可寫為:
</>復制代碼
a {
color: white;
&:hover {
color: blue;
}
}
嵌套之后,代碼量是不是少了很多,而在生成的時候會將嵌套的代碼分開成CSS規則的樣式。
二、包管理工具NPM, Yarn 1、NPMNPM 是 Node.js 的包管理和分發工具,其強大的功能也是 Node.js 能夠如此成功的因素之一。在使用 NPM 安裝第三方模塊(也可理解為擴展包)時,你需要在 package.json 中對要安裝的模塊指定好名稱和版本號。然后運行下面命令進行安裝:
</>復制代碼
npm install
在開始安裝之前,npm install 命令會先檢查 node_modules 文件夾是否已存在要安裝的模塊,如果該模塊已安裝,則跳過,接著安裝下一模塊。安裝完成后,所有的第三方模塊都將被下載到 node_modules 文件夾中。你也可以使用下面命令來強制安裝所有模塊,不管該模塊之前是否安裝過:
</>復制代碼
$ npm install -f
由于國內墻的原因,使用npm install安裝會非常緩慢,慢到想切JJ,不過還好,我們可以使用淘寶提供的國內鏡像進行下載。
淘寶NPM鏡像使用方法
1、安裝淘寶鏡像cnpm
</>復制代碼
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用cnpm安裝包:
</>復制代碼
$ cnpm install [name]
2、Yarn
Yarn 是 Facebook 在 2016 年 10 月開源的一個新的包管理器,用于替代現有的 NPM 客戶端或者其他兼容 NPM 倉庫的包管理工具。Yarn 在保留 NPM 原有工作流特性的基礎上,使之變得更快、更安全、更可靠。Yarn和NPM的用法基本相同。
我們可通過下面命令來安裝當前項目的所有包:
</>復制代碼
$ yarn install
或是使用下面這種更加簡潔的命令:
</>復制代碼
$ yarn
另外,我們也可以通過下面命令來添加指定的包:
</>復制代碼
$ yarn add [package]
三、Gulp,laravel-elixir
Gulp 是一個使用 JavaScript 編寫的自動化構建工具。用于對前端通用任務(如最小化、壓縮、編譯)進行自動構建。Gulp 還可以用來監控源代碼的改動并自動運行任務。
Laravel 5.1 提供了一個封裝 Gulp 的 Laravel Elixir 包,可用于輕松構建 Gulp 任務,Elixir 為 Gulp 添加了優雅的語法,Elixir 之于 Gulp 正如 Laravel 之于 PHP。
Laravel 已默認為我們生成了 gulpfile.js 文件,并集成了 laravel-elixir 模塊。
gulpfile.js
</>復制代碼
var elixir = require("laravel-elixir");
// somgthing code
elixir(function(mix) {
mix.sass("app.scss");
});
我們可以在 Gulp 中使用 require 對模塊進行引用。
由于 Laravel 已默認集成了 laravel-elixir 模塊來幫助開發者更好的使用 Gulp.
laravel-elixir
laravel-elixir 提供了一套簡潔流暢的 API 來幫助 Laravel 開發者在項目中更加輕松的定義一些的基本的 Gulp 任務。在我們應用的 gulpfile.js 文件中,Laravel 已默認幫我們設置好了對 Sass 文件的編譯:
</>復制代碼
elixir(function(mix) {
mix.sass("app.scss");
});
四、引入JS文件
如果我們前端需要使用Jquery庫,該怎么引入呢?直接使用它的路徑在頁面引入?NO,這種方法太老土了,我們可以使用強大的gulp前端工具,對前端需要的JS文件進行整合,然后使用整合編譯后的app.js文件,這樣可以大大減少前端的工作量。
1.使用NPM來為應用添加jQuery 模塊</>復制代碼
cnpm install jquery --save
npm后邊的--save是什么意思呢? 原來是這樣的,當下載的東西多了,我們可以使用參數來限制依賴環境。
</>復制代碼
npm install jquery --save //依賴 dependencies 方便以后用
npm install jquery --dev //開發依賴 發布后不需要的
npm install jquery -g // 全局安裝,在哪都能用
當使用上邊的命令安裝好后,我們打開package.json來看看:
</>復制代碼
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"jquery": "^3.1.1",
"laravel-elixir": "^4.0.0"
}
}
jquery被安裝在開發依賴dependencies中。
2.導入jquery及編輯gulpfile.js文件安裝完成之后,我們需要新建一個 app.js 文件來導入 Bootstrap 和 jQuery 的模塊。
resources/assets/js/app.js
</>復制代碼
window.$ = window.jQuery = require("jquery");
require("bootstrap-sass");
$(document).ready(function() {
});
最后,我們還需要使用 Gulp 對 app.js 文件進行模塊打包。
gulpfile.js
</>復制代碼
var elixir = require("laravel-elixir");
elixir(function(mix) {
mix.sass("app.scss")
.browserify("app.js");
});
</>復制代碼
Elixir 的 browserify 方法,給予你在瀏覽器引入模塊及 ECMAScript 6 的有用的特性。此任務假設你的腳本都保存在 resources/assets/js,并會將生成的文件放置于 public/js/app.js.
3.gulp編譯文件
gulp編譯文件
</>復制代碼
vagrant@homestead:~/Code/sample$ gulp
我們可以看到,編譯后生成public/js/app.js文件,我們可以在需要引入的頁面,直接使用下面的方法引入編譯好的js文件即可。
</>復制代碼
將編譯的app.js文件引用到我們的主視圖文件中:
views/layouts/default.blade.php
</>復制代碼
<span class="coffeescript">@yield(<span class="hljs-string">"title"</span>, <span class="hljs-string">"Sample"</span>) - Laravel 入門教程</span>
@include("layouts._header")
@include("shared.messages")
@yield("content")
@include("layouts._footer")
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/22270.html
摘要:然后中間件使用方法來啟動獲取實例,使用類來管理主要分為兩步獲取實例,主要步驟是通過該實例從存儲介質中讀取該次請求所需要的數據,主要步驟是。 說明:本文主要通過學習Laravel的session源碼學習Laravel是如何設計session的,將自己的學習心得分享出來,希望對別人有所幫助。Laravel在web middleware中定義了session中間件IlluminateSess...
摘要:對于這樣嵌套的,使用來校驗對象間關系很重要,可以看做是進入核心業務邏輯前的初步校驗。。當然最后寫表時還有,避免壞數據進入。,總之,在寫程序時,很重要,需要去寫,包括和。。。 在用laravel寫api時,當前端傳進來的request是POST/PUT/PATH等method時,那需要做request validation,盡管對于前后端分離程序,前端程序Angular/Vue已經做了v...
摘要:上次的訪談,介紹了下可愛的依云醬,回憶傳送門。這里簡單地介紹下龍女仆,全名小林家的龍女仆,為什么介紹這部劇呢因為設計獅顏值同學也安利了這部。劇情簡介在獨身又勞累的小林劃重點一名程序員身邊突然出現的穿著女仆服裝的美少女托爾。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的訪談,介紹了下可愛的依云醬,回憶傳送門。不...
摘要:上次的訪談,介紹了下可愛的依云醬,回憶傳送門。這里簡單地介紹下龍女仆,全名小林家的龍女仆,為什么介紹這部劇呢因為設計獅顏值同學也安利了這部。劇情簡介在獨身又勞累的小林劃重點一名程序員身邊突然出現的穿著女仆服裝的美少女托爾。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的訪談,介紹了下可愛的依云醬,回憶傳送門。不...
摘要:實際上,在中關閉主要包括兩個過程保存當前到介質中在中存入。,學習下關閉的源碼吧先。總之,關閉的第二件事就是給添加。通過對的源碼分析可看出共分為三大步啟動操作關閉。總結本小系列主要學習了的源碼,學習了的三大步。 說明:在中篇中學習了session的CRUD增刪改查操作,本篇主要學習關閉session的相關源碼。實際上,在Laravel5.3中關閉session主要包括兩個過程:保存當前U...
閱讀 1631·2021-11-11 10:59
閱讀 2642·2021-09-04 16:40
閱讀 3677·2021-09-04 16:40
閱讀 2996·2021-07-30 15:30
閱讀 1674·2021-07-26 22:03
閱讀 3176·2019-08-30 13:20
閱讀 2239·2019-08-29 18:31
閱讀 451·2019-08-29 12:21
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要