Laravel 5.4 + AdminLTE

安装AdminLTE

• 在composer.json文件中，添加：
  "almasaeed2010/adminlte": "~2.0"
• 执行命令：
  composer update
  然后AdminLTE模板会被下载到 vendor/almasaeed2010 目录下。

安装相关工具

安装gulp和Elixir

gulp是基于node.js的，如果还没有安装：

安装node

     brew update
     brew upgrade
     brew cleanup
     brew install node
     sudo chown -R $(whoami) /usr/local
     brew link --overwrite node
     brew postinstall node

注意现在Mac上不能使用sudo执行brew了，所以安装方式不再简单了。

• 确认已经安装成功：
  node -v

全局安装gulp和bower（第一次需要）

    npm install -g gulp
    npm install -g bower

• 确认已经安装成功：
  gulp -v
  bower -v

安装项目的Node模块依赖

项目根目录下自动包含了一个名为 package.json 的文件，Node的 npm 包管理器是使用 package.json 来安装项目的Node模块依赖。
在项目根目录下执行：

    npm install gulp

如果有WARN提示需要升级一些组件，同样使用npm install安装即可。

    npm install bower
    npm install

如果上面有安装失败的个别项，直接独立安装失败项即可：
sudo npm install xxxx #安装xxxx软件包
sudo npm install [email protected] #安装xxxx软件包的1.2.0版本

安装完成之后，项目根目录下会新增了一个node_modules文件夹。

配置并部署

配置bower

在项目根目录新增bower配置文件.bowerrc

{
    "directory": "vendor/bower"
}

然后执行：

    bower init   #一路回车就好

在项目根目录执行以下命令，安装所需前端资源：

    bower install admin-lte
    bower install fontawesome
    bower install ionicons

使用gulp自动构建前端资源

在项目根目录下新建gulpfile.js文件，内容填充：

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

gulp.task('copy', function () {
// jQuery
gulp.src("vendor/bower/AdminLTE/plugins/jQuery/jquery-2.2.3.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/"));

// Ion-icons
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/[email protected]").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.2.3.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();
});

终于大功告成~