Laravel學習筆記三-前端工做流

時間 2019-11-16

標籤 laravel 學習筆記前端简体版

原文原文鏈接

本節將學習 Laravel 是如何利用 Sass, NPM, Gulp造成一套完整的前端工做流模式的。php

1、句法強大的樣式表Sass

Sass 是一種可用於編寫CSS的語言，藉助 Sass 咱們能夠少寫不少CSS代碼，並使樣式代碼的編寫更加靈活多變，如能夠按照Sass的語法使用變量，繼承父類樣式特色，等咱們在Sass寫完樣式以後，而後使用gulp工具編譯，就能夠生成CSS代碼文件。css

1.樣式文件導入

Sass 使用 @import來導入其它的樣式文件。如：html

@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的變量命名方式同樣。node

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

上面代碼定義了一個 $navbar-color 顏色變量，在編譯成功以後，變量將被替代爲它所對應的值。jquery

3.嵌套

Sass 還容許你在選擇器中進行相互嵌套，以減小代碼量。laravel

4.引用父選擇器

還能夠在 Sass 嵌套中使用 & 對父選擇器進行引用：npm

a {
  color: white;
}

a:hover {
  color: blue;
}

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

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

嵌套以後，代碼量是否是少了不少，而在生成的時候會將嵌套的代碼分開成CSS規則的樣式。gulp

2、包管理工具NPM, Yarn

一、NPM

NPM 是 Node.js 的包管理和分發工具，其強大的功能也是 Node.js 可以如此成功的因素之一。在使用 NPM 安裝第三方模塊（也可理解爲擴展包）時，你須要在 package.json 中對要安裝的模塊指定好名稱和版本號。而後運行下面命令進行安裝：

npm install

在開始安裝以前，npm install 命令會先檢查 node_modules 文件夾是否已存在要安裝的模塊，若是該模塊已安裝，則跳過，接着安裝下一模塊。安裝完成後，全部的第三方模塊都將被下載到 node_modules 文件夾中。你也可使用下面命令來強制安裝全部模塊，無論該模塊以前是否安裝過：

$ npm install -f

因爲國內牆的緣由，使用npm install安裝會很是緩慢，慢到想切JJ，不過還好，咱們可使用淘寶提供的國內鏡像進行下載。

淘寶NPM鏡像使用方法

一、安裝淘寶鏡像cnpm

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

2.使用cnpm安裝包：

$ cnpm install [name]

二、Yarn

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

咱們可經過下面命令來安裝當前項目的全部包：

$ yarn install

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

$ yarn

另外，咱們也能夠經過下面命令來添加指定的包：

$ yarn add [package]

3、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');
});

4、引入JS文件

若是咱們前端須要使用Jquery庫，該怎麼引入呢？直接使用它的路徑<script src="/js/jquery.js"></script>在頁面引入？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文件便可。

<script src="/js/app.js"></script>

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

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Sample')  - Laravel 入門教程</title>
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
  @include('layouts._header')

    <div class="container">
        <div class="col-md-offset-1 col-md-10">
          @include('shared.messages')
          @yield('content')
          @include('layouts._footer')
        </div>
    </div>

  <script src="/js/app.js"></script>
  </body>
</html>