Bower和Gulp集成前端資源

時間 2019-12-01

標籤 bower gulp 集成前端資源欄目 JavaScript 简体版

原文原文鏈接

在咱們開始前先介紹下流程：css

安裝node.js。
安裝npm。
全局安裝bower。
根目錄建立 .bowerrc （可選）
在項目中安裝bower 並建立 bower.json 文件，運行 bower命令將須要的包安裝，而後檢查 bower.json 。
編輯 gulpfile.js 文件將任務寫入。
在 resources/assets 目錄下建立一個.less文件以待編譯使用。
先運行 gulp copyfiles 命令將文件複製到對應的路徑下，而後運行 gulp 進行編譯合併等任務。

1 Bower是什麼？

bower是一個包管理工具只不過它面向前端。html

1.1 安裝

1.1.1 安裝node.js

在咱們安裝Bower前應該先安裝node.js，由於安裝Bower咱們須要用到npm，首先先看看咱們是否安裝了npm：前端

npm --version

若是沒有輸出版本號，那麼能夠到nodejs的官網去下載安裝，或者經過 homebrew 安裝，具體的Google一下很全。node

1.1.2 安裝Bower

當安裝了npm後能夠經過npm全局安裝Bowerjquery

sudo npm install -g bower

1.1.3 安裝Gulp

經過npm全局安裝gulplaravel

sudo npm install -g gulp

1.2 引入Bootstrap

1.2.1 在項目根目錄建立一個 .bowerrc 文件（可選）

這是bower的一個步驟，目的是告訴Bower 下載的文件放到什麼地方，咱們建立並編輯bowerrc文件：npm

{
  "directory": "vendor/bower_dl"
}

↑ 這一步是可選的，若是沒有指定路徑的話 bower會自動在項目根目錄建立一個bower_dl文件夾存放下載的文件，json

1.2.2 在項目本地安裝Bower

sudo npm install bower

1.2.3 在項目根目錄建立 bower.json 文件

bower.json文件時管理依賴包的，它跟composer.json相似，咱們編輯它的內容：gulp

{
  "name": "learn_project",
  "description": "Learn Laravel",
  "ignore": [
    "**/.*",
    "node_modules",
    "vendor/bower_dl",
    "test",
    "tests"
  ]

1.2.4 開始引入前端文件

上面的配置完成後咱們就能夠引入前端資源了：bootstrap

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>

相關標籤/搜索

node+bower+gulp+webpack

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。