Laravel 5.0入门笔记(3): 使用Elixir与Gulp来简化css+js部署

具体这两个是啥玩意, 我也不清楚, 但是我需要的是使用它们来提供一个非常简单的开发流程. 我在本笔记中使用的是bootstrap+less+jquery. 你将会看到, 我们实际上只需要维护两个文件, usr.less以及usr.js, 而如何通过它们产生想要的css与js脚本(甚至自动嵌入到网页模板)都是自动的.
首先, 我们来看如何使用Gulp.
由于Gulp以及Elixir都需要通过npm包管理器来安装, 我们首先安装node以及npm.

安装node

1. 按照官方教程安装node 4, 成功安装后执行node -v 将会看到版本是: v4.2.6. 其实它还安装了npm (node package manager)
2. 由于待会我们会碰到npm WARN optional dep failed, continuing [email protected]使得安装Gulp不成功, 我们需要修改npm版本为3.3.12. 此外, 为加快访问速度, 我们还将node包的源设为淘宝源.

   npm config set registry https://registry.npm.taobao.org
   sudo npm install -g [email protected]

安装Gulp

切换到cdhome, 你会发现有个package.json, 打开可以看到这里告诉node我们的应用依赖于Gulp.

我们按照官方教程全局安装Gulp:

 sudo npm install --global gulp

安装Elixir

cdhome
npm install

至此, 完成了安装.

安装Bower

我们将用bower来安装bootstrap, jquery.

 sudo npm install --global bower

使用bower安装Bootstrap+font-awesome

切换到根目录cdhome并新建bower.json:

{
  "name": "KindlePusher",
  "description": "Laravel 5 framework for KindlePusher",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "~3.3.6",
    "font-awesome": "~4.5.0"
  }
}

应该注意, bootstrap自带jquery, 如果要使用jquery-ui, 则可能会有命名冲突, 解决办法可以参考这里.

接着, 创建.bowerrc来指定bower安装包的路径:

{
 "directory": "resources/assets/bower"
}

由于我们将要使用新的bootstrap, 我们可以删除resources/assets/less/bootstrap目录

最后, 我们可以使用bower install安装新的包了.

使用Gulp

使用Gulp我们首先在根目录创建gulpfile.js:

process.env.DISABLE_NOTIFIER = true;
var elixir = require('laravel-elixir');
var bowerDir='resources/assets/bower/';
var lessPaths = [
  bowerDir + "bootstrap/less",
  bowerDir + "font-awesome/less",
];

//mixed mission: less+jquery
elixir(function(mix) {
    mix .less('app.less', 'public/css/app.css', { paths: lessPaths})
        .scripts([
          'jquery/dist/jquery.min.js',
          'bootstrap/dist/js/bootstrap.min.js',
        ], 'public/js/app.js', bowerDir)
        //need to create the usr.js
        .copy('resources/assets/js/usr.js', 'public/js/usr.js')
        .copy([bowerDir + 'font-awesome/fonts', bowerDir+'bootstrap/fonts'], 'public/fonts');
});

注意, 这里我们使用了两个文件来分别定义css与js. 你可能需要了解最基本的less用法, 这里我给出一个模板(用vimcss编辑)

@import "bootstrap";
@import "font-awesome";
@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
*{font-family:"Arial","Microsoft YaHei" !important;}
*{text-shadow: silver 0px 0px 1px !important;}
html{
  position: relative;
  height:100%;
}
body{
  margin-bottom:30px;
}
body, label, .checkbox label {
  font-weight: 300;
}
@footerh: 30px;
#wrap{
  min-height: 100%;
  height: auto;
  margin: 0 auto [email protected];
  padding: 0 0 @footerh;
}
#footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: @footerh;
  background-color: $F5F5F5;
  color: #777;
  text-align: center;
  border-top: 3px solid #E5E5E5;
  .container {
    padding: 0 15px;
  }
}
.layout { border-radius: 0.25rem; height:40rem; }
#wrap {
  .wrapper{ .make-row(); }
  .container{
    padding: 60px 15px 0;
    .container-fluid
  }
  .header{
    height: 5rem;
    margin-bottom: 2rem;
    background-color: #DAEEFF;
    text-align: center;
    border-radius: 0.25rem;
  }
  .sidbar{
    float: right;
    width: 15rem;
    background-color: #FAE3C4;
    .layout
  }
  .content{
    margin-right: 15.5rem;
    background-color: #957BBE;
    .layout
  }
}
pre{
  word-wrap: break-word;
  white-space: pre-wrap;
}

接着, 我们还需要创建cdhome &&mkdir resources/assets/js/usr.js, 其内容为:

$(function(){
  //you can comment it out after test
  alert('hello word');
});

至此, 我们可以运行(根目录下):gulp less, gulp scripts, gulp, 分别表示编译css, js, css+js.
以后的流程就是修改vimcss和vimjs, 然后运行上述命令, 则网站会自动更新.

最后, 我们修改下公共模板, 使得它自动嵌入我们通过Gulp编译的css与js. 作为扩充, 我还示例了如何安装Laravel扩展包laravelcollective/html, 它将公共模板中Html代码大大简化了.

公共模板的设计

为了简化代码, 我们使用laravelcollective/html, 请自行按照链接安装.

注意, 由于我们用的版本是Laravel 5.0, 我们需要安装低版本的laravelcollective/html, 实际上的配置是: "laravelcollective/html": "5.0.*", 而且会报错

[Symfony\Component\Debug\Exception\FatalErrorException] Call to undefined method Illuminate\Foundation\Application::getCachedCompilePath()
这时, 我们需要删除:rm vendor/compiled.php
最后, 在config/app.php的配置中也要去掉上述链接给出的::class

接下来, 我们就可以在app.blade.php中使用{!! Html::style('css/app.css') !!}来载入css了, 类似的在< /body>之前载入javascript: {!! HTML::script('js/usr.js') !!}

这里, 我加入了bootstrap的一个框架(在< nav>< /nav>之后):

      

        @yield('header')
      
{{--End of header--}}
      

        @yield('content')
      
{{--End of content--}}
      

        @yield('sidbar')
      
{{--End of sidbar--}}
    
{{--End of Wrap--}}
    {{--End of footer--}}

本作品采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循署名-非商业用途-保持一致的创作共用协议.