Bower和Gulp集成前端資源
在我們開始前先介紹下流程：
- 安裝node.js。
- 安裝npm。
- 全局安裝bower。
- 根目錄創建 .bowerrc （可選）
- 在項目中安裝bower 並創建 bower.json 文件，運行 bower命令將需要的包安裝，然後檢查 bower.json 。
- 編輯 gulpfile.js 文件 將任務寫入。
- 在 resources/assets 目錄下創建一個.less文件 以待編譯使用。
- 先運行 gulp copyfiles 命令將文件復制到對應的路徑下，然後運行 gulp 進行編譯 合並等任務。
1 Bower是什麽？
bower是一個包管理工具 只不過它面向前端。
1.1 安裝
1.1.1 安裝node.js
在我們安裝Bower前應該先安裝node.js，因為安裝Bower我們需要用到npm，首先先看看我們是否安裝了npm：
npm --version
如果沒有輸出版本號，那麽可以到nodejs的官網去下載安裝，或者通過 homebrew 安裝，具體的Google一下 很全。
1.1.2 安裝Bower
當安裝了npm後可以通過npm全局安裝Bower
sudo npm install -g bower
1.1.3 安裝Gulp
通過npm全局安裝gulp
sudo npm install -g gulp
1.2 引入Bootstrap
1.2.1 在項目根目錄創建一個 .bowerrc
這是bower的一個步驟，目的是告訴Bower 下載的文件放到什麽地方，我們創建並編輯bowerrc文件：
{
"directory": "vendor/bower_dl"
}
↑ 這一步是可選的，如果沒有指定路徑的話 bower會自動在項目根目錄創建一個bower_dl文件夾存放下載的文件，
1.2.2 在項目本地安裝Bower
sudo npm install bower
1.2.3 在項目根目錄創建 bower.json 文件
bower.json文件時管理依賴包的，它跟composer.json類似，我們編輯它的內容：
{
"name": "learn_project",
"description": "Learn Laravel",
"ignore": [
"**/.*",
"node_modules",
"vendor/bower_dl",
"test",
"tests"
]
1.2.4 開始引入前端文件
上面的配置完成後我們就可以引入前端資源了：
bower install jquery bootstrap --save
完事兒之後看一眼 bower.json 是否添加了兩個依賴：
{
"name": "learn_project",
"description": "Learn Laravel",
"ignore": [
"**/.*",
"node_modules",
"vendor/bower_dl",
"test",
"tests"
],
"dependencies": {
"jquery": "^3.2.1",
"bootstrap": "^3.3.7"
}
}
的確添加了兩個依賴 一個jQuery 一個bootstrap，然後運行bower update命令就可以下載到 /vendor/bower_dl 咯。
2 Gulp
Gulp是一個前端的工作流工具，它可以讓你在開發中變得很輕松。接下來我們就會使用到Gulp。
2.1 編寫一個less文件
我們先在 resource/asset/ 目錄下創建一個 .less 文件，文件名隨你命名，然後編輯此文件如下：
@import "bootstrap/bootstrap";
@import "//fonts.googleapis.com/css?family=Roboto:400,300";
@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
body, label, .checkbox, label {
font-weight: 300;
}
↑ 在上面代碼中 我們引入了bootstrap 但是它現在還沒有引入到正確的路徑中，我們下面就要使用Gulp將其拷貝到正確的位置。
2.2 編輯gulpfile.js
var gulp = require(‘gulp‘); var elixir = require(‘laravel-elixir‘); /* |-------------------------------------------------------------------------- | Elixir Asset Management |-------------------------------------------------------------------------- | | Elixir provides a clean, fluent API for defining some basic Gulp tasks | for your Laravel application. By default, we are compiling the Less | file for our application, as well as publishing vendor resources. | */ /** * 拷貝所需要的文件 */ gulp.task("copyfiles", function(){ // 拷貝jQuery到resources等待合並 gulp.src("vendor/bower_dl/jquery/dist/jquery.js") .pipe(gulp.dest("resources/assets/js/")); // 拷貝bootstrap到resources,提供給layout.less引入。 gulp.src("vendor/bower_dl/bootstrap/less/**") .pipe(gulp.dest("resources/assets/less/bootstrap")); // 拷貝bootstrap.js到resources等待合並 gulp.src("vendor/bower_dl/bootstrap/dist/js/bootstrap.js") .pipe(gulp.dest("resources/assets/js/")); // 拷貝fonts到public gulp.src("vendor/bower_dl/bootstrap/dist/fonts/**") .pipe(gulp.dest("public/assets/fonts")); }); elixir(function(mix) { // 合並js文件 mix.scripts([‘js/jquery.js‘, ‘js/bootstrap.js‘], // 合並到哪裏 ‘public/assets/js/app.js‘, // 從哪個路徑搜索這些需要合並的文件 ‘resources/assets‘ ); // 編譯less文件 mix.less(‘layout.less‘,‘public/assets/css/layout.css‘); });
2.3 運行Gulp
我們先運行 gulp copyfiles 來將需要用到的文件拷貝到相應的路徑下：
gulp copyfiles
然後運行 gulp 來進行合並和編譯：
gulp
當兩個命令都運行完 你就可以看看你的public目錄和resources目錄是不是有所變化。
3 使用編譯好的前端文件
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/assets/css/layout.css"> </head> <body> <script src="/assets/js/app.js"></script> </body> </html>
Bower和Gulp集成前端資源