用Laravel+Grunt+Bower管理你的應用

現在開源盛行，從後端的各個類庫，到現在前端的jQuery插件，前端框架等，愈來愈多優秀的組件能夠被咱們選擇應用在現有的項目中。隨着開源組件的更新迭代，它們互相之間的依賴也愈來愈複雜。舊的框架對於新的變化老是顯得難以適從，就算爲了新的特性改變舊的框架，也會顯的略顯牽強。因而就會有新的框架和工具，在這個時候凸現出來。

每一個項目開始的方向是很重要的，良好的開始能夠避免以後的各類問題。下面要說的三個工具，就是現有應用開發的一個良好開端。

Laravel

Laravel是一個很是新的PHP框架，借鑑了不少前輩的優秀特性，以PHP5爲起點，引入了Composer做爲包管理工具，號稱爲WEB藝術家創造的PHP框架。

Grunt

基於JavaScript的自動化構建工具，能夠將重複的任務，例如壓縮（minification），編譯，單元測試，linting等自動化。

Bower

Web前端開發的包管理工具，解決前端框架間的依賴關係，方便模塊化和重用。

優點

1. 使用Laravel能夠更好的利用最新版PHP的優點，排除了一些歷史問題。

2. 利用Composer能夠極大減小」輪子」的數量，優秀的包能夠去Packagist找到，這些包幾乎都利用Github來託管，利用Github的issue和request能夠輔助提升包的質量。

3. Bower能夠幫助統一管理開源前端庫，如Bootstrap和jQuery等，一樣這些包也在Github上託管。

4. Grunt幫助粘合先後端的開源組件，將合併編譯壓縮等工做自動化。

安裝使用

有些須要提早安裝的組件這裏不在贅述，請自行Google。

• Composer

• Node & npm

• Grunt

• Bower

Laravel

有了Composer後安裝一個Laravel項目很是容易

composer create-project laravel/laravel myproject

安裝完成後在myproject目錄下就生成了laravel的框架結構，入口文件在public中。在myproject根目錄下，有一個composer.json文件，這個文件看起來是這樣的：

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "laravel/framework": "4.1.*"
    },
    //...
}

這個文件能夠控制項目的一些依賴關係，咱們須要一些組件的時候直接在require下添加便可，composer會幫咱們去查找這個組件所需的依賴包。

接着爲了安裝前端框架，咱們先來建立幾個公共目錄，在public下，建立相似的目錄

.
|-- assets
|   |-- css
|   |-- fonts
|   `-- js
|-- favicon.ico
|-- index.php
|-- packages
`-- robots.txt

這裏只有assets目錄是我新建立的

Bower

準備好後端框架之後，能夠安裝前端框架了，例如Bootstrap。利用Bower安裝的前端庫是其整個工程，並非咱們須要的個別文件，因此能夠講它們先放在一個位置，以後利用Grunt來統一處理。

首先配置一下安裝路徑，在myproject根目錄下配置文件.bowerrc爲

{
  "directory": "public/assets/bower"
}

這個文件告訴bower，將下載的包都安裝到public/assets/bower下。

接着在根目錄建立一個bower的配置文件bower.json爲

{
  "name": "myproject"
}

接着添加前端庫

bower install bootstrap -S

這個命令將會利用配置文件管理整個庫依賴，這個時候再看一下配置文件，bower已經幫助咱們自動安裝好了Bootstrap依賴的包–jQuery，同時修改了配置文件

{
  "name": "myproject",
  "dependencies": {
    "bootstrap": "~3.1.1"
  }
}

在看一下目標目錄，public/assets下，生成了一個bower目錄，其中包含了Bootstrap和jQuery。

Grunt

根據上面的步驟，咱們很方便的創建了後端框架和前端框架，可是前端框架在使用的時候直接用bower下的文件並非很是方便，並且還可能會涉及到一些庫的合併壓縮等步驟。這些問題均可以交給Grunt去作.

首先在myproject根目錄下利用npm init初始化一個配置文件。根據提示一步一步填寫便可，最後生成的配置文件package.json應該以下所示：

{
  "name": "myproject",
  "version": "0.0.1",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

有不同的地方不用擔憂，儘管修改便可。

接着咱們要安裝一些Grunt的插件，幫助咱們更好的完成所需功能。

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev

這裏的每一個插件我會在下面的配置中介紹。上面命令中的--save-dev選項的做用是將安裝的這些包放入配置文件依賴項中，方便之後安裝。下面是安裝後的配置文件：

{
  "name": "myproject",
  "version": "0.0.1",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-less": "~0.10.0",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-cssmin": "~0.9.0"
    "grunt-contrib-copy": "~0.5.0"
  }
}

注意在安裝後有了一個node_modules目錄，這個是node項目依賴包的位置，咱們通常都在本地進行文件的合併和壓縮，因此能夠將這個包保留在本地。另外對於bower生成的目錄，在Grunt處理過之後也是能夠不上傳到正式環境中的。因此修改.gitignore文件，將這兩個文件夾排除出去：

/bootstrap/compiled.php
/vendor
composer.phar
composer.lock
.env.local.php
.env.php
.DS_Store
Thumbs.db
/public/assets/bower
/node_modules

接下來就要進行Grunt的配置項編寫了，我會在配置中加入註釋幫助理解。還記得咱們剛剛創建的package.json配置文件中的入口文件嗎？這個文件還不存在，因此咱們須要手動創建，在myproject下建立Gruntfile.js的文件，內容以下：

module.exports = function(grunt) {
  //配置項
  grunt.initConfig({
    //concat插件配置，用來合併多個文件
    concat: {
      //文件間的分隔符
      options: {
        separator: ';',
      },
      //app是一個任務名，能夠隨意命名
      app: {
        //將進行的合併項
        src: [
          './public/assets/bower/jquery/dist/jquery.js',
          './public/assets/bower/bootstrap/dist/js/bootstrap.js',
        ],
        //合併後放置在
        dest: './public/assets/js/javascript.js',
      },
    },
    //css合併壓縮
    cssmin: {
      //任務名
      app: {
        src: [
          './public/assets/bower/bootstrap/dist/css/bootstrap.css',
          './public/assets/css/base.css'
        ],
        dest: './public/assets/css/stylesheet.css'
      }
    },
    //js壓縮
    uglify: {
      options: {
        mangle: false //是否混合變量，若是需求的話置爲true
      },
      app: {
        files: {
          './public/assets/js/javascript.js': './public/assets/js/javascript.js',
        }
      },
    },
    //移動文件
    copy: {
      app: {
        files: [
          {
            expand: true,
            flatten: true,
            cwd: './public/assets/bower/bootstrap/fonts/',
            src: ['**'], 
            dest: './public/assets/fonts/', 
            filter: 'isFile'
          },
        ]
      }
    },
    //監聽文件變化，若是文件變化，將從新進行任務
    watch: {
      app: {
        files: [
          './public/assets/bower/jquery/dist/jquery.js',
          './public/assets/bower/bootstrap/dist/js/bootstrap.js',
          './public/assets/bower/bootstrap/dist/css/bootstrap.css',
        ],   
        //文件變化後執行哪些任務
        tasks: ['concat:app','uglify:app','cssmin:app','copy:app'],
        options: {
          livereload: true
        }
      },
    }
  });

  //導入所需的插件
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  //註冊兩個任務
  grunt.registerTask('watch', ['watch']);
  grunt.registerTask('default', ['concat:app','uglify:app','cssmin:app','copy:app']);
};

咱們看到，最後註冊了兩個任務，這兩個任務能夠從終端中執行，例如：

grunt watch

能夠開啓文件監聽，當文件變化時執行watch中設定的任務。

若是直接執行grunt，則會執行default中設定的任務。咱們也能夠具體指定執行某一單一任務，如

grunt copy:app

上面則只將bootstrap/fonts中的文件拷貝到public/assets/fonts中。

對於上述的這些插件，能夠在這裏找到，也有詳細的用法。

每一個人都有本身的喜愛，個人這種配置可能只拋個磚，但願有更好的方式分享。最後在總結一下這三劍客：

• Laravel利用了最新PHP特性，引入了Composer包管理，解決後端庫之間的依賴

• Bower幫助安裝和解決前端框架和庫的依賴關係

• Grunt幫助粘合先後端的開源組件，而且完成合並和壓縮等重複性工做。

下面兩篇參考文章各有特點，若是但願瞭解一下能夠點擊連接去看。

我在Github上創建了這篇博客中所講的目錄結構，想要快速創建一個可以使用的工程，只須要如下幾部：

git clone https://github.com/suyan/Laravel-Bower-Grunt.git
composer install
bower update
npm install
grunt

參考

1. How I use Bower and Grunt with my Laravel projects

2. Using Grunt + Bower with Laravel and Bootstrap