Laravel 5.0入门笔记(3): 使用Elixir与Gulp来简化css+js部署
具体这两个是啥玩意, 我也不清楚, 但是我需要的是使用它们来提供一个非常简单的开发流程. 我在本笔记中使用的是bootstrap+less+jquery. 你将会看到, 我们实际上只需要维护两个文件, usr.less以及usr.js, 而如何通过它们产生想要的css与js脚本(甚至自动嵌入到网页模板)都是自动的.
首先, 我们来看如何使用Gulp.
由于Gulp以及Elixir都需要通过npm包管理器来安装, 我们首先安装node以及npm.
安装node
- 按照官方教程安装
node 4, 成功安装后执行node -v将会看到版本是: v4.2.6. 其实它还安装了npm(node package manager) - 由于待会我们会碰到
npm WARN optional dep failed, continuing [email protected]使得安装Gulp不成功, 我们需要修改npm版本为3.3.12. 此外, 为加快访问速度, 我们还将node包的源设为淘宝源.
12npm config set registry https://registry.npm.taobao.orgsudo npm install -g npm@3.3.12
安装Gulp
切换到cdhome, 你会发现有个package.json, 打开可以看到这里告诉node我们的应用依赖于Gulp.
我们按照官方教程全局安装Gulp:
|
1 |
sudo npm install --global gulp |
安装Elixir
|
1 2 |
cdhome npm install |
至此, 完成了安装.
安装Bower
我们将用bower来安装bootstrap, jquery.
|
1 |
sudo npm install --global bower |
使用bower安装Bootstrap+font-awesome
切换到根目录cdhome并新建bower.json:
|
1 2 3 4 5 6 7 8 9 10 |
{ "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安装包的路径:
|
1 2 3 |
{ "directory": "resources/assets/bower" } |
由于我们将要使用新的bootstrap, 我们可以删除
resources/assets/less/bootstrap目录
最后, 我们可以使用bower install安装新的包了.
使用Gulp
使用Gulp我们首先在根目录创建gulpfile.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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编辑)
|
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 |
@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 -@footerh; 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, 其内容为:
|
1 2 3 4 5 |
$(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>之后):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="wrap" class="container"> <div class="header"> @yield('header') </div>{{--End of header--}} <div class="content"> @yield('content') </div>{{--End of content--}} <div class="sidbar"> @yield('sidbar') </div>{{--End of sidbar--}} </div>{{--End of Wrap--}} <div id="footer" role="contentinfo"> <div class="container"> <p>Designed by <a href="//yourinfo.site">YourName</a> &bull; Copyright &copy; {{ date("Y") }} <a href="/{{ isset($projname) ? strtolower($projname) : '' }}">{{ $projname or '' }}</a> All rights Reserved.</p> </div> </div>{{--End of footer--}} |
发表回复