标签：save .json 开始 provides 开发 dep for box doc
在我们开始前先介绍下流程：
bower是一个包管理工具 只不过它面向前端。
在我们安装Bower前应该先安装node.js，因为安装Bower我们需要用到npm，首先先看看我们是否安装了npm：
npm --version
如果没有输出版本号，那么可以到nodejs的官网去下载安装，或者通过 homebrew 安装，具体的Google一下 很全。
当安装了npm后可以通过npm全局安装Bower
sudo npm install -g bower
通过npm全局安装gulp
sudo npm install -g gulp
这是bower的一个步骤，目的是告诉Bower 下载的文件放到什么地方，我们创建并编辑bowerrc文件：
{
"directory": "vendor/bower_dl"
}
↑ 这一步是可选的，如果没有指定路径的话 bower会自动在项目根目录创建一个bower_dl文件夹存放下载的文件，
sudo npm install bower
bower.json文件时管理依赖包的，它跟composer.json类似，我们编辑它的内容：
{
"name": "learn_project",
"description": "Learn Laravel",
"ignore": [
"**/.*",
"node_modules",
"vendor/bower_dl",
"test",
"tests"
]
上面的配置完成后我们就可以引入前端资源了：
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 咯。
Gulp是一个前端的工作流工具，它可以让你在开发中变得很轻松。接下来我们就会使用到Gulp。
我们先在 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将其拷贝到正确的位置。
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‘); });
我们先运行 gulp copyfiles 来将需要用到的文件拷贝到相应的路径下：
gulp copyfiles
然后运行 gulp 来进行合并和编译：
gulp
当两个命令都运行完 你就可以看看你的public目录和resources目录是不是有所变化。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/assets/css/layout.css"> </head> <body> <script src="/assets/js/app.js"></script> </body> </html>
标签：save .json 开始 provides 开发 dep for box doc
原文地址：http://www.cnblogs.com/sun-kang/p/7613181.html
