PHP

使用 Laravel 构建内容管理框架（一）

为使用 Laravel 构建内容管理框架做好环境、代码和脚本的准备

安装Laravel

在终端使用Composer安装Laravel

1
sudo composer create-project laravel/laravel backend --prefer-dist 5.1.x

执行后，会在当前目录下新建一个文件夹，里面就是新建的Laravel项目

安装gulp、bower

在终端使用npm安装gulp

1
2
3
4
5
6
7
sudo npm install -g gulp  #全局安装npm
sudo npm install -g bower #全局安装bower
cd backend
sudo npm install gulp   #在项目本地安装gulp
sudo npm install bower  #在项目本地安装bower
sudp npm install        #安装项目Node依赖、Laravel Elixir

运行gulp tdd之后，会自动监控测试单元

使用bower集成前端依赖库

在项目根目录新增文件.bowerrc

1
2
3
{
    "directory": "vendor/bower"
}

上述配置告诉bower在vendor/bower存放下载文件
执行命令bower init创建文件bower.json

依赖安装所需前端资源

1
2
3
sudo bower install admin-lte
sudo bower install fontawesome
sudo bower install ionicons

打开文件gulpfile.js，编辑如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var gulp = require('gulp');
var elixir = require('laravel-elixir');
gulp.task('copy', function () {
    // jQuery
    gulp.src("vendor/bower/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    // bootstarp
    gulp.src("vendor/bower/AdminLTE/bootstrap/css/bootstrap.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/bootstrap/js/bootstrap.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    // AdminLTE
    gulp.src("vendor/bower/AdminLTE/dist/css/AdminLTE.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/dist/css/skins/skin-blue.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/dist/js/app.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    gulp.src("vendor/bower/AdminLTE/dist/img/*")
        .pipe(gulp.dest("public/assets/img/"));
    // Fontawesome
    gulp.src("vendor/bower/font-awesome/css/font-awesome.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/font-awesome/fonts/*")
        .pipe(gulp.dest("public/assets/fonts/"));
    // Ionicons
    gulp.src("vendor/bower/Ionicons/css/ionicons.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/Ionicons/fonts/*")
        .pipe(gulp.dest("public/assets/fonts/"));
    // slimScroll
    gulp.src("vendor/bower/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    // iCheck
    gulp.src("vendor/bower/AdminLTE/plugins/iCheck/icheck.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    gulp.src("vendor/bower/AdminLTE/plugins/iCheck/square/blue.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/plugins/iCheck/square/blue.png")
        .pipe(gulp.dest("public/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/plugins/iCheck/square/blue@2x.png")
        .pipe(gulp.dest("public/assets/css/"));
    // select2
    gulp.src("vendor/bower/AdminLTE/plugins/select2/select2.full.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    gulp.src("vendor/bower/AdminLTE/plugins/select2/select2.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
    gulp.src("vendor/bower/AdminLTE/plugins/select2/select2.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    // pace
    gulp.src("vendor/bower/AdminLTE/plugins/pace/pace.min.css")
        .pipe(gulp.dest("resources/assets/css/"));
    gulp.src("vendor/bower/AdminLTE/plugins/pace/pace.min.js")
        .pipe(gulp.dest("resources/assets/js/"));
});
elixir(function (mix) {
    // 合并javascript脚本
    mix.scripts(
        [
            'jQuery-2.1.4.min.js',
            'bootstrap.min.js',
            'app.min.js',
            'pace.min.js',
            'jquery.slimscroll.min.js',
            'icheck.min.js',
            'select2.full.min.js',
            'select2.min.js'
        ],
        'public/assets/js/app.js',
        'resources/assets/js/'
    );
    // 合并css脚本
    mix.styles(
        [
            'bootstrap.min.css',
            'pace.min.css',
            'select2.min.css',
            'AdminLTE.min.css',
            'skin-blue.min.css',
            'font-awesome.min.css',
            'ionicons.min.css',
            'blue.css'
        ],
        'public/assets/css/app.css',
        'resources/assets/css/'
    );
    // 运行单元测试
    mix.phpUnit();
});

在终端执行命令如下：

1
2
gulp copy
gulp

上述操作将会在根目录文件夹public/assets/生成所需的前端资源，接下来就是在视图模板中使用。