一步一步用laravel开发回风博客系统-02-集成前端资源

原作者网站:http://laravelcoding.com/blog?tag=L5+Beauty
可以参考中文站点:http://laravelacademy.org/resources/blog

我是基于5.2的,而且有些东西我觉得有必要有的没必要,所以思路是跟着以上两个参考着搞,具体还是有区别的,我最终代码放在了Github:https://github.com/wedojava/hfblog.dev

由于正在补英语,所以有些我能看懂的就没从原作者那里翻译。

本节,通过Bower和Gulp集成前端资源,这样以后,当任何我们用到的脚本库等东西更新了,我们只需要简单的运行命令即可完成更新。当然里,你可以用CDN,也可以用composer来更新或者写自己的gulp或bower脚本。

我们需要这些东西

一般,我是需要这些东西:jQuery, Bootstrap, Font Awesome,下面我们把他们集成进我们的项目。

用gulp和bower集成前端资源

请在进行下面的步骤之前运行:

npm install bower

1、设置

我们在项目根目录下新建bower的文件.bowerrc,这是可选的,这样做的目的是为了告诉 Bower 所有下载的文件都会存放到 vendor 目录下,如果跳过这一步,Bower 将在项目根目录下创建一个 bower_dl 目录用于存放下载文件。这里我们编辑 .bowerrc 文件内容如下:

{
"directory": "vendor/bower_dl"
}

在根目录下创建bower.json文件,用于声明 Bower 依赖的包。该文件跟 composer.json 作用类似,只不过是针对 Bower 的而已。编辑 bower.json 内容如下:

{
"name": "HFBLog",
"description": "awesome HFBlog ",
"ignore": [
"**/.*",
"node_modules",
"vendor/bower_dl",
"test",
"tests"
]
}

2、引入 Bootstrap,jQuery,Font Awesome和 DataTables

bower install jquery --save

bower install bootstrap --save

bower install fontawesome --save

bower install datatables --save

bower install datatables-plugins --save

此时,bower.json文件内容发生了改变,新添加里如下行:

"dependencies": {
"jquery": "~2.1.4",
"bootstrap": "~3.3.6",
"font-awesome": "fontawesome#~4.5.0",
"datatables": "~1.10.10",
"datatables-plugins": "~1.10.10"
}

运行:

bower update

3、创建hfblog.less

我们将会使用 Gulp 来编译 Bootstrap 的 less 文件。
resources/assets/less 目录下创建一个 hfblog.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;
}
@import "fontawesome/font-awesome";

在该文件中,首先,我们导入 boostrap.less 文件(现在尚不存在,我们将使用 Gulp 将其拷贝到正确位置),然后我们导入使用的字体并对默认 CSS 略作调整。

4、编辑gulpfile.js

现在,Bower 已经将最新版本的 jQuery、Bootstrap 和 Font Awesome 安装到博客项目,我们可以使用 Gulp 将其合并并发布到项目中。

更新 gulpfile.js 文件内容如下:

var gulp = require('gulp');
var rename = require('gulp-rename');
var elixir = require('laravel-elixir');

/**
* 拷贝任何需要的文件
*
* Do a 'gulp copyfiles' after bower updates
*/

gulp.task("copyfiles", function() {

gulp.src("vendor/bower_dl/jquery/dist/jquery.js")
.pipe(gulp.dest("resources/assets/js/"));

gulp.src("vendor/bower_dl/bootstrap/less/**")
.pipe(gulp.dest("resources/assets/less/bootstrap"));

gulp.src("vendor/bower_dl/bootstrap/dist/js/bootstrap.js")
.pipe(gulp.dest("resources/assets/js/"));

gulp.src("vendor/bower_dl/bootstrap/dist/fonts/**")
.pipe(gulp.dest("public/assets/fonts"));

gulp.src("vendor/bower_dl/font-awesome/less/**")
.pipe(gulp.dest("resources/assets/less/fontawesome"));

gulp.src("vendor/bower_dl/font-awesome/fonts/**")
.pipe(gulp.dest("public/assets/fonts"));

// 拷贝 datatables
var dtDir = 'vendor/bower_dl/datatables-plugins/integration/';

gulp.src("vendor/bower_dl/datatables/media/js/jquery.dataTables.js")
.pipe(gulp.dest('resources/assets/js/'));

gulp.src(dtDir + 'bootstrap/3/dataTables.bootstrap.css')
.pipe(rename('dataTables.bootstrap.less'))
.pipe(gulp.dest('resources/assets/less/others/'));

gulp.src(dtDir + 'bootstrap/3/dataTables.bootstrap.js')
.pipe(gulp.dest('resources/assets/js/'));

});

/*
|--------------------------------------------------------------------------
| 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 Sass
| file for our application, as well as publishing vendor resources.
|
*/


elixir(function(mix) {
// mix.sass('app.scss');
//
// 合并脚本文件
mix.scripts([
'js/jquery.js',
'js/bootstrap.js',
'js/jquery.dataTables.js',
'js/dataTables.bootstrap.js'
],
'public/assets/js/hfblog.js',
'resources/assets'
);

// 编译 Less
mix.less('hfblog.less', 'public/assets/css/hfblog.css');
});

5、运行 gulp

在项目根目录下运行:

gulp copyfiles
gulp

如果没有意外,public\assets 下会新建 css、js、fonts 三个文件夹,里面有我们生成和拷贝的脚本,样式和字体。 如果没有,请检查 vendor\bower_dl\ 目录下是否有已经下载好的bootstrap,jquery和font-awesome。

本节完成了必备资源的整合,准备工作完毕了,下节我们完成登录和注册。