Laravel_Elixir_gulp任務利器安裝

目錄

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 -v
v4.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');
});