成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Laravel學(xué)習(xí)筆記三-前端工作流

liuchengxu / 655人閱讀

摘要：本節(jié)將學(xué)習(xí)是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強(qiáng)制安裝所有模塊，不管該模塊之前是否安裝過由于國內(nèi)墻的原因，使用安裝會(huì)非常緩慢，慢到想切，不過還好，我們可以使用淘寶提供的國內(nèi)鏡像進(jìn)行下載。

本節(jié)將學(xué)習(xí) Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。
一、句法強(qiáng)大的樣式表Sass

Sass 是一種可用于編寫CSS的語言，借助 Sass 我們可以少寫很多CSS代碼，并使樣式代碼的編寫更加靈活多變，如可以按照Sass的語法使用變量，繼承父類樣式特點(diǎn)，等我們在Sass寫完樣式之后，然后使用gulp工具編譯，就可以生成CSS代碼文件。

1.樣式文件導(dǎo)入

Sass 使用 @import來導(dǎo)入其它的樣式文件。如：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

上面代碼將導(dǎo)入存放在 node_modules/bootstrap-sass/assets/stylesheets/bootstrap 文件夾中的所有樣式文件。你也可以使用下面代碼來對多帶帶一個(gè)文件進(jìn)行導(dǎo)入：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss";
2.變量

Sass支持在代碼中加入變量，所有的變量都以$開頭，這和PHP的變量命名方式一樣。

$navbar-color: #3c2e43;
.navbar-inverse {
  background-color: $navbar-color;
}

上面代碼定義了一個(gè) $navbar-color 顏色變量，在編譯成功之后，變量將被替代為它所對應(yīng)的值。

3.嵌套

Sass 還允許你在選擇器中進(jìn)行相互嵌套，以減少代碼量。

4.引用父選擇器

還可以在 Sass 嵌套中使用 & 對父選擇器進(jìn)行引用：

a {
  color: white;
}

a:hover {
  color: blue;
}

使用嵌套，上邊的代碼可寫為：

a {
  color: white;
  &:hover {
    color: blue;
  }
}

嵌套之后，代碼量是不是少了很多，而在生成的時(shí)候會(huì)將嵌套的代碼分開成CSS規(guī)則的樣式。

二、包管理工具NPM, Yarn 1、NPM

NPM 是 Node.js 的包管理和分發(fā)工具，其強(qiáng)大的功能也是 Node.js 能夠如此成功的因素之一。在使用 NPM 安裝第三方模塊（也可理解為擴(kuò)展包）時(shí)，你需要在 package.json 中對要安裝的模塊指定好名稱和版本號(hào)。然后運(yùn)行下面命令進(jìn)行安裝：

npm install

在開始安裝之前，npm install 命令會(huì)先檢查 node_modules 文件夾是否已存在要安裝的模塊，如果該模塊已安裝，則跳過，接著安裝下一模塊。安裝完成后，所有的第三方模塊都將被下載到 node_modules 文件夾中。你也可以使用下面命令來強(qiáng)制安裝所有模塊，不管該模塊之前是否安裝過：

$ npm install -f

由于國內(nèi)墻的原因，使用npm install安裝會(huì)非常緩慢，慢到想切JJ，不過還好，我們可以使用淘寶提供的國內(nèi)鏡像進(jìn)行下載。

淘寶NPM鏡像使用方法

1、安裝淘寶鏡像cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用cnpm安裝包：

$ cnpm install [name]
2、Yarn

Yarn 是 Facebook 在 2016 年 10 月開源的一個(gè)新的包管理器，用于替代現(xiàn)有的 NPM 客戶端或者其他兼容 NPM 倉庫的包管理工具。Yarn 在保留 NPM 原有工作流特性的基礎(chǔ)上，使之變得更快、更安全、更可靠。Yarn和NPM的用法基本相同。

我們可通過下面命令來安裝當(dāng)前項(xiàng)目的所有包：

$ yarn install

或是使用下面這種更加簡潔的命令：

$ yarn

另外，我們也可以通過下面命令來添加指定的包：

$ yarn add [package]
三、Gulp,laravel-elixir

Gulp 是一個(gè)使用 JavaScript 編寫的自動(dòng)化構(gòu)建工具。用于對前端通用任務(wù)（如最小化、壓縮、編譯）進(jìn)行自動(dòng)構(gòu)建。Gulp 還可以用來監(jiān)控源代碼的改動(dòng)并自動(dòng)運(yùn)行任務(wù)。

Laravel 5.1 提供了一個(gè)封裝 Gulp 的 Laravel Elixir 包，可用于輕松構(gòu)建 Gulp 任務(wù)，Elixir 為 Gulp 添加了優(yōu)雅的語法，Elixir 之于 Gulp 正如 Laravel 之于 PHP。

Laravel 已默認(rèn)為我們生成了 gulpfile.js 文件，并集成了 laravel-elixir 模塊。
gulpfile.js

var elixir = require("laravel-elixir");
// somgthing code
elixir(function(mix) {
    mix.sass("app.scss");
});

我們可以在 Gulp 中使用 require 對模塊進(jìn)行引用。

由于 Laravel 已默認(rèn)集成了 laravel-elixir 模塊來幫助開發(fā)者更好的使用 Gulp.

laravel-elixir

laravel-elixir 提供了一套簡潔流暢的 API 來幫助 Laravel 開發(fā)者在項(xiàng)目中更加輕松的定義一些的基本的 Gulp 任務(wù)。在我們應(yīng)用的 gulpfile.js 文件中，Laravel 已默認(rèn)幫我們設(shè)置好了對 Sass 文件的編譯：

elixir(function(mix) {
    mix.sass("app.scss");
});
四、引入JS文件

如果我們前端需要使用Jquery庫，該怎么引入呢？直接使用它的路徑在頁面引入？NO，這種方法太老土了，我們可以使用強(qiáng)大的gulp前端工具，對前端需要的JS文件進(jìn)行整合，然后使用整合編譯后的app.js文件，這樣可以大大減少前端的工作量。

1.使用NPM來為應(yīng)用添加jQuery 模塊 
cnpm install jquery --save

npm后邊的--save是什么意思呢? 原來是這樣的，當(dāng)下載的東西多了,我們可以使用參數(shù)來限制依賴環(huán)境。

npm install jquery --save  //依賴 dependencies 方便以后用
npm install jquery --dev   //開發(fā)依賴 發(fā)布后不需要的
npm install jquery -g  // 全局安裝，在哪都能用

當(dāng)使用上邊的命令安裝好后，我們打開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被安裝在開發(fā)依賴dependencies中。

2.導(dǎo)入jquery及編輯gulpfile.js文件

安裝完成之后，我們需要新建一個(gè) app.js 文件來導(dǎo)入 Bootstrap 和 jQuery 的模塊。

resources/assets/js/app.js

window.$ = window.jQuery = require("jquery");
require("bootstrap-sass");

$(document).ready(function() {

});

最后，我們還需要使用 Gulp 對 app.js 文件進(jìn)行模塊打包。

gulpfile.js

var elixir = require("laravel-elixir");

elixir(function(mix) {
    mix.sass("app.scss")
       .browserify("app.js");
});
Elixir 的 browserify 方法，給予你在瀏覽器引入模塊及 ECMAScript 6 的有用的特性。此任務(wù)假設(shè)你的腳本都保存在 resources/assets/js，并會(huì)將生成的文件放置于 public/js/app.js.
3.gulp編譯文件

gulp編譯文件

vagrant@homestead:~/Code/sample$ gulp

我們可以看到，編譯后生成public/js/app.js文件，我們可以在需要引入的頁面，直接使用下面的方法引入編譯好的js文件即可。

將編譯的app.js文件引用到我們的主視圖文件中：
views/layouts/default.blade.php



  
    @yield("title", "Sample")  - Laravel 入門教程
    
  
  
  @include("layouts._header")

    

        

          @include("shared.messages")
          @yield("content")
          @include("layouts._footer")

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/22270.html

相關(guān)文章

  • Laravel學(xué)習(xí)筆記之Session源碼解析(上)

    摘要：然后中間件使用方法來啟動(dòng)獲取實(shí)例，使用類來管理主要分為兩步獲取實(shí)例，主要步驟是通過該實(shí)例從存儲(chǔ)介質(zhì)中讀取該次請求所需要的數(shù)據(jù)，主要步驟是。 說明：本文主要通過學(xué)習(xí)Laravel的session源碼學(xué)習(xí)Laravel是如何設(shè)計(jì)session的，將自己的學(xué)習(xí)心得分享出來，希望對別人有所幫助。Laravel在web middleware中定義了session中間件IlluminateSess...

    NervosNetwork 評(píng)論0 收藏0

  • Laravel 學(xué)習(xí)筆記之 request validation

    摘要：對于這樣嵌套的，使用來校驗(yàn)對象間關(guān)系很重要，可以看做是進(jìn)入核心業(yè)務(wù)邏輯前的初步校驗(yàn)。。當(dāng)然最后寫表時(shí)還有，避免壞數(shù)據(jù)進(jìn)入。，總之，在寫程序時(shí)，很重要，需要去寫，包括和。。。 在用laravel寫api時(shí)，當(dāng)前端傳進(jìn)來的request是POST/PUT/PATH等method時(shí)，那需要做request validation，盡管對于前后端分離程序，前端程序Angular/Vue已經(jīng)做了v...

    imingyu 評(píng)論0 收藏0

  • SegmentFault 社區(qū)訪談 | mcfog：自由進(jìn)出 Coding && A

    摘要：上次的訪談，介紹了下可愛的依云醬，回憶傳送門。這里簡單地介紹下龍女仆，全名小林家的龍女仆，為什么介紹這部劇呢因?yàn)樵O(shè)計(jì)獅顏值同學(xué)也安利了這部。劇情簡介在獨(dú)身又勞累的小林劃重點(diǎn)一名程序員身邊突然出現(xiàn)的穿著女仆服裝的美少女托爾。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的訪談，介紹了下可愛的依云醬，回憶傳送門。不...

    neroneroffy 評(píng)論0 收藏0

  • SegmentFault 社區(qū)訪談 | mcfog：自由進(jìn)出 Coding && A

    摘要：上次的訪談，介紹了下可愛的依云醬，回憶傳送門。這里簡單地介紹下龍女仆，全名小林家的龍女仆，為什么介紹這部劇呢因?yàn)樵O(shè)計(jì)獅顏值同學(xué)也安利了這部。劇情簡介在獨(dú)身又勞累的小林劃重點(diǎn)一名程序員身邊突然出現(xiàn)的穿著女仆服裝的美少女托爾。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的訪談，介紹了下可愛的依云醬，回憶傳送門。不...

    lx1036 評(píng)論0 收藏0

  • Laravel學(xué)習(xí)筆記之Session源碼解析(下)

    摘要：實(shí)際上，在中關(guān)閉主要包括兩個(gè)過程保存當(dāng)前到介質(zhì)中在中存入。，學(xué)習(xí)下關(guān)閉的源碼吧先?？傊?，關(guān)閉的第二件事就是給添加。通過對的源碼分析可看出共分為三大步啟動(dòng)操作關(guān)閉?？偨Y(jié)本小系列主要學(xué)習(xí)了的源碼，學(xué)習(xí)了的三大步。 說明：在中篇中學(xué)習(xí)了session的CRUD增刪改查操作，本篇主要學(xué)習(xí)關(guān)閉session的相關(guān)源碼。實(shí)際上，在Laravel5.3中關(guān)閉session主要包括兩個(gè)過程：保存當(dāng)前U...

    Awbeci 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<