管理你的 assets

前言

上一节,我们对路由与 model 表绑定的相关内容做了介绍,并通过实践来强化对路由与 model 绑定的理解。本节,我们对 Laravel 前端的 assets 做一个了解。

说明

开发环境:Windows 7

Laravel 版本: 5+

IDE: Phpstorm

昨天把整个 Laravel 联手项目迁到了 Linux 环境中,才发现自己真是被 Windows 惯坏了。 Windows下很多东西不用管,傻瓜式安装,顶多对 nginx 或者 apache 目录指定进行修改。

Linux 各种依赖缺失,各种修补,头都大了。千修万修还是没有修全。

何为 assets

asset 译为 “资产”。广义上讲 Laravel 的一切,包括前端后台都是资产,但这里的 assets 只是指前端的东西,比如 js,css,png,等等。因为你的整个服务与人打交道的,人能看见的都是这些东西。

有过 Android 开发经验的同学知道,有一个目录就是 assets , 这里存放的正是那些各种尺寸大小的图片和 xml 配置。

在 Laravel 中,assets 是一个抽象词,具体内容是在 laravel/resources 目录下存放,这里的所有东西都属于项目的 assets 。

assets 管理

以前,手写代码的时候,为了规整,建立各个目录,包含 js,css,pic 等,对应存放各种文件,还包括对 js,图片等的压缩,最小化 css ,单元测试等等。在 Laravel 中这些一样也是存放在各自的目录中,不同的是,有专门的工具来对用到的这些 js,css 进行管理,自动将这些文件放到对应的目录中,而且对 js,css 和图片的压缩与最小化,还有单元测试,包括所有之前人工的工作都进行了自动化完成。这样就节省出更多的时间进行业务和功能上的完善。

Laravel 用到的就是 gulplaravel-elixir ,通过他们来共同管理。

gulp 本身是一个自动化构建工具,laravel-elixir 这个接口可以在 laravel 项目中轻松操作 gulp 来进行 assets 的自动化构建。

gulp

打开项目根目录下的 gulpfile.json ,你能看到一段代码如下:

这段代码运行后(当然是自动运行的),会在 laravel/resources/assets 下生成一个名为 sass 的目录,且里面有一个名为 app.scss 的文件。点开一看,发现它跟普通的 css 文件格式很类似嘛,没错 css 就是通过 gulp 命令来生成的。

当你执行了 gulp 命令后,你会发现在 laravel/public/ 目录下生成了一个名为 css 的文件夹,且里面有一个名为 app.css 的 css 文件。双击打开,跟 app.scss 的东西一样。

如果你不想每次修改完 app.scss 都要再执行 gulp 命令的话,你可以输入 gulp watch 这个命令来对 app.scss 文件的改动进行实时监控。只要 app.scss 一有变动就会立刻反应到 app.css 里面。

如果你想添加 CoffeeScript ,那你只需在 gulpfile.json 文件中添加如下代码:

然后在 laravel/resources/assets/ 目录下新建一个 coffee 目录,并在里面新建一个名为 module.coffee 的文件,打开该文件加入一句代码: class Module 。保存后,输入 gulp 命令,看到提示中不仅有 sass , 而且有 coffee 。

打开 laravel/public/ 会看到一个新生成的 js 目录,且里面包含一个名为 module 的 js 文件。

压缩 css 文件的时候,用到的 gulp 命令是: gulp –production 再看一眼你的 css ,发现是否有了变化呢?更多的方法还请查阅 gulp 文档,实在是太强大了,省时省力。

总结

由于是前端的东西,本身我也不太熟,所以也是共同学习,更多的还是看文档。

不过这里推荐看几个点:

  • mix.styles()
  • mix.scripts()
  • gulp tdd
  • mix.phpUnit()
  • 重要 mix.version()
  • 重要 {{ elixir() }} 在 html 的 中的应用

发表评论

电子邮件地址不会被公开。 必填项已用*标注