使用Laravel搭建本地部署環境

Laravel

部署環境

  • $ git clone ..
  • $ composer update：第三方庫管理，類似於cocosPods等的管理工具
  • $ npm install：
  • $ ls -al：
  • $ cp .env.example .env：
  • $ php artisan key:generate：

composer

NPM

  • NPM基本介紹

  • NPM是隨NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

    • 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用
    • 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用
    • 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用

  • 常用指令

  • 由於新版的nodejs已經繼承npm，所以之前npm也一併安裝好了，同樣可以通過輸入“npm -v”來測試是否成功安裝，
    $ npm -v
  • 如果你安裝的是旧版本的npm，可以很容易的通過npm命令來升級
    $ sudo npm install npm -g
  • 使用npm命令安裝模塊
  • 使用npm安裝模塊語句：$ npm install <Module Name>，但是為了多人協同開發，在install第三方套件的時候，經常需要使用
    $ npm install <Module Name> --save
  • 安裝完成之後，我們的<Module>包就放在了工程目錄下面，

  • 全局安裝於本地安裝：npm的包安裝分為本地安裝(local)、全局安裝(global)兩種，從敲的命令行來看，差別只是在於有沒有-g而已
    $ npm install <Module Name>：#本地安裝
    $ npm install <Module Name> -g：#全局安裝

  • 注意：此處可能會有一個坑，如出現如下錯誤$ npm err! Error: connect ECONNREFUSED 127.0.0.1:8087，其解決辦法只需要在命令行執行$ npm config set proxy null

  • npm設置全局安裝的默認目錄
    $ npm config set prefix "directory"
  • 本地安裝
    • 1.將安裝包放在./node_modules下(運行npm命令時所在的目錄)，如果node_modules目錄，會在當前執行npm指令的目錄下生成node_modules目錄
    • 2.可以通過require()來引入本地安裝的包
  • 全局安裝
    • 1.將安裝包放在/usr/local下或者你的node的安裝目錄
    • 2.可以直接在命令行裡使用
  • 如果你希望具備兩者功能，則需要在兩個地方安裝它或使用npm link
查看安裝信息
  • 你可以使用如下命令來查看所有全局安裝的模塊：
    $ npm list -g
  • 如果你想要查看某個模塊的版本號，可使用如下命令： 
    1
    2
    3
    4
    $ npm list grunt

    projectName@projectVersion /path/to/project/folder
    └── grunt@0.4.1
卸載模塊
  • 我們可以使用以下命令來卸載Node.js模塊
    $ npm uninstall <Module Name>

Laravel Mix(內容來自Laravel官方文檔)

簡介

  • Laravel Mix提供一套流式API，使用一些通用的CSS和JavaScript預處理器為Laravel應用定義Webpack構建步驟，通過簡單的方法鏈，你就可以流式定義資源管道。例如：

    1
    2
    mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');

  • 如果你對如何使用Webpack和前端資源編譯感到困惑，那麽你會愛上Laravel Mix。不過，並不是強制要求在開發期間使用它，你可以自由選擇使用任何前端資源管理工具，或者壓根不使用

安裝&設置
  • 安裝Node
  • 在開始接觸Mix之前，必須首先確保Node.js和NPM在機器上已經安裝
    $ node -v
    $ npm -v
  • 默認情況下，Laravel Homestead已經包含了你所需要的一切；不過，如果你沒有使用Vagrant，你也可以從Node的下載頁面輕鬆的安裝Node
  • Laravel Mix
  • 接下來，需要安裝Laravel Mix，在安裝的Laravel根目錄下，你會發現有一個package.json文件。該文件包含你所需要的一切，和composer.json類似，只不過是用來定義Node依賴而非PHP依賴，你可以通過運行如下命令來安裝需要的依賴
    $ npm install
  • 如果你正在Windows系統上開發，需要在運行npm install命令時戴上--no-bin-links:
    $ npm install --no-bin-links
    運行Mix

  • Mix是位於Webpack頂層的配置層，所以要運行Mix任務你只需要在運行包含在默認package.json文件中的其中某個NPM腳本即可

    1
    2
    3
    4
    5
    // 運行所有Mix任務...
    $ npm run dev

    // 運行所有Mix任務並減少輸出...
    $ npm run production

  • 監控前端資源改變

  • npm run watch命令將會持續在終端運行並監聽所有相關文件的修改，Webpack將會在發現修改後自動重新編譯資源文件：
    $ npm run watch
處理樣式表
  • webpack.mix.js是所有資源編譯的入口，可以將其看作Webpack的輕量級配置封裝層。Mix任務可以以方法鏈的方式被鏈在一起來定義前端資源如何被編譯。
Less

  • 要將Less編譯成CSS，可以使用less方法。下面讓我們來編譯app,less文件到public/css/app.css:

    1
    mix,less('resources/assets/less/app.less', 'public/css');

  • 多次調用less方法可用於編譯多個文件：

    1
    2
    mix.less('resources/assets/less/app.less', 'public/css')
       .less('resources/assets/less/admin.less', 'public/css');

  • 如果你想要自定義編譯後文件的輸出位置，可以將完整的路徑信息作為第二個參數傳遞給less方法：

    1
    mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css');
Sass

  • sass方法允許你將Sass編譯成CSS。你可以想這樣使用該方法：

    1
    mix.sass('resources/assets/sass/app.scss', 'public/css');

  • 同樣，和less方法一樣，你可以將多個Sass文件編譯成單個CSS文件，甚至自定義結果CSS的輸出路徑：

    1
    2
    mix.sass('resources/assets/sass/app', 'public/css')
       .sass('resources/assets/admin.sass', 'public/admin');
原生CSS
  • 如果你只想要將多個原生CSS樣式合併到一個文件，可以使用combine方法。該方法還支持連結JavaScript文件
    1
    2
    3
    4
    mix.combine([
    	'public/css/vendor/normalize.css',
    	'public/css/vendor/videojs.css'
    ], 'public/css/all.css');
Source Map
  • 雖然Source Map默認被禁用，但是可以通過在webpack.mix.js文件中調用mix.sourceMaps()來激活，儘管這會帶來編譯／性能開銷，不過在編譯資源的時候可以提供額外的調適信息給瀏覽器的開發者工具：
    1
    2
    mix.js('resources/assets/js/app.js', 'public/js')
       .sourceMaps();

處理腳本

  • Mix還提供了多個特性幫助你處理JavaScript文件，例如編譯ECMAScript2015，模塊綑綁，最小化以及合併原生JavaScript文件。更好的是，這些都是無縫集成的，不需要額外的自定義配置：

    1
    mix.js('resources/assets/js/app.js', 'public/js');

  • 通過這一行代碼，你可以實現如下功能：

    • ES2015語法
    • 編譯.vue文件
    • 最小化生產環境

      代碼拆分

  • 綑綁所有應用特定JavaScript和vendor庫的一個潛在的缺點是進行長期緩存將變得更加困難，例如，單個更新應用代碼將會強制瀏覽器下載所有vendor庫，即使它們並沒有更新

  • 如果你想要頻繁更新應用的JavaScript，需要考慮對vendor庫進行提取和拆分，這樣的話，一次修改應用代碼不會影響vendor.js文件的緩存。Mix的extract方法可以實現這樣的功能：

    1
    2
    mix.js('resources/assets/js/app.js', 'public/js')
       .extract(['vue'])

  • extract方法接收包含所有庫的數組或你想要提取到vendor.js文件的模塊，使用上述代碼作為釋例，Mix將會生成如下文件:

    • public/js/maifest.js：Webpack manifest runtime
    • public/js/vendor.js：vendor庫
    • public/js/app.js：應用代碼
  • 要避免JavaScript錯誤，確保以正確順序加載這些文件：
    1
    2
    3
    <script src="/js/mainfest.js"></script>
    <script src="/js/vendor.js"></script>
    <script src="/js/app.js"></script>

自定義Webpack配置

webpack -u