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 fsevents@1.0.6使得安装Gulp不成功, 我们需要修改npm版本为3.3.12. 此外, 为加快访问速度, 我们还将node包的源设为淘宝源.

安装Gulp

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

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

安装Elixir

至此, 完成了安装.

安装Bower

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

使用bower安装Bootstrap+font-awesome

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

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

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

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

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

使用Gulp

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

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

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

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

最后, 我们修改下公共模板, 使得它自动嵌入我们通过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>之后):

发表评论