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>