Laravel_Elixir_gulp任務利器安裝

標籤：改變   更新   個數   客戶   test   article   set   注釋   傳遞   

目錄

1. 說明
2. 安裝
   1. 1安裝gulp
   2. 2安裝Elixir
   3. 3Elixir快速入門
   4. 4合并cssjs
   5. 5版本控制version
   6. 6複製copy
   7. 7方法串聯

1.說明

詳細說明暫時省略，後期補充。
小白的角度理解：gulp是管理你的css、js、圖片等靜態資源檔案，包括複製、合并、壓縮等功能，elixir是管理和使用gulp處理後的檔案的，主要方便開發小組統一管理。。。

2.安裝 1）安裝gulp

由於Gulp是基於Node.js的，所以安裝之前需要先安裝Node。不管你使用的是什麼作業系統，都可以從Node.js官網下載與之對應的安裝包。
檢查：

node -vv4.4.3

node是通過命令‘npm’來安裝第三方模組庫的，使用npm來安裝Gulp：

npm install -g gulp

安裝完檢查：

gulp -v[15:35:17] CLI version 3.9.1
 

2）安裝Elixir

Laravel 5 安裝完成後在項目根目錄下自動包含了一個名為package.json的檔案，該檔案內容如下：

{  "private": true,  "devDependencies": {    "gulp": "^3.8.8"  },  "dependencies": {    "laravel-elixir": "^4.0.0",    "bootstrap-sass": "^3.0.0"  }}
 

node的npm包管理器是通過讀取該檔案進行安裝的。
當你需要新增弄得模組依賴的時候，將其添加進去，隨後執行以下命令即可安裝成功。

npm install

安裝完成之後，你會看到項目根目錄下新增了一個node_modules檔案夾，在該檔案夾內包含了我們剛剛安裝的gulp、laravel-elixir、bootstrap-sass包。

3）Elixir快速入門

Laravel項目包含了一個預設的gulpfile.js，該檔案定義了Elixir版的Gulp任務。在該檔案中，可以看到一個Gulp任務樣本：

elixir(function(mix) {    mix.sass(‘app.scss‘);});
 

mix.sass任務可以用於編譯sass檔案，在本例中該檔案名稱為app.sass，這個檔案位於resources/assets/sass目錄下，其內容如下：

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

說明：這行命令是laravel是否支援bootstrap前端架構樣式，預設是不支援的，是被注釋掉的，如果你的項目需要bootstrap支援就開啟注釋，然後執行以下命令：

gulp

在項目根目錄下運行gulp命令來執行定義在elixir方法中的任務。

通過執行gulp命令，會讀取你在gulpfile.js中定義的任務，這裡會執行你的這一行命令，把bootstrap架構對應的css樣式下載下來，並儲存到public/css/app.css檔案裡。

在視圖模板中使用：

<link rel="stylesheet" href="/css/app.css">

預設情況下，Elixir並不會壓縮編譯的CSS檔案，你可以通過添加–production選項到gulp命令來壓縮CSS：

gulp --production

 

4）合并（css、js）

Elixir強大的功能合并，換一個角度說，如果被合并的檔案是一個檔案，也可以理解為複製檔案了，就看你怎麼用了，呵呵。

預設情況下，要合并的源檔案位於resources/css和resources/js目錄下，合并後的檔案位於public/css和public/js下，而且合并後的檔案儲存為all.css和all.js。

合并主要用來合并css、js，文法分別為：

mix.styles([    ‘test1.css‘,    ‘test2.css‘]);mix.scripts([    ‘test1.js‘,    ‘test2.js‘]);
 

合并，同時改變輸出檔案路徑和源檔案路徑

mix.scripts(    [‘test1.js‘, ‘test2.js‘], // 原檔案名稱    ‘public/js/front.js‘,     // 輸出檔案路徑    ‘resources/front/js‘      // 源檔案路徑);
 

合并某個目錄下的檔案

mix.stylesIn(‘public/css‘);   // 合并public/css目錄下所有css檔案mix.scriptsIn(‘public/js‘);   // 合并public/js目錄下所有js檔案
 

5）版本控制(version)

當前端資源（css、js等）更新後，強制客戶瀏覽器載入最新版本，Elixir使用version方法為你處理這種情況。
version方法接收相對於public目錄的檔案名稱，附加唯一hash到檔案名稱，從而實現緩衝重新整理。例如，產生的檔案名稱看上去是這樣——all-89ws5fg4.css：
文法：

elixir(function(mix) {    mix.version(‘css/all.css‘);});
 

在視圖檔案中使用(elixir)：
產生版本檔案後，可以在視圖中使用Elixir全域的PHP協助函數elixir方法來載入相應的帶hash值的前端資源，elixir函數會自動判斷hash檔案名稱。

<link rel="stylesheet" href="{{ elixir(‘css/all.css‘) }}">

 

給多個檔案添加版本控制(version)：
方法：傳遞一個數組到version方法

elixir(function(mix) {    mix.version([‘css/all.css‘, ‘js/app.js‘]);});

在視圖檔案中使用(elixir)：
一旦檔案被加上版本號碼，就可以使用協助函數elixir來產生指向該hash檔案的連結。記住，你只需要傳遞沒有hash值的檔案名稱到elixir方法。該協助函數使用未加hash值的檔案名稱來判斷檔案當前的hash版本：

<link rel="stylesheet" href="{{ elixir(‘css/all.css‘) }}"><script src="{{ elixir(‘js/app.js‘) }}"></script>
 

6）複製(copy)

複製檔案到新的位置

elixir(function(mix) {    mix.copy(‘vendor/foo/bar.css‘, ‘public/css/bar.css‘);  //第一個參數為源檔案，第二個為目標檔案});
 

將整個目錄都複製到新的位置

elixir(function(mix) {    mix.copy(‘vendor/package/views‘, ‘resources/views‘);});
 

7）方法串聯

elixir(function(mix) {    mix.version([‘css/all.css‘, ‘js/app.js‘])        .copy(‘vendor/foo/bar.css‘, ‘public/css/bar.css‘)        .copy(‘vendor/package/views‘, ‘resources/views‘);});

Laravel_Elixir_gulp任務利器安裝