6. 管理你的css和js文件 - 从零开始学Laravel

时间 2019-12-05

标签管理 css 文件开始 laravel 栏目 CSS 繁體版

原文原文链接

在Laravel中咱们能够直接将css和js文件放在app/public目录下，不过在正式项目开发中咱们可能会使用Sass, Less, Stylus,Browserify等css和js预处理器，而laravel自带的基于gulp任务的Laravel Elixir都能支持它们。css

到这里，咱们已经比较熟悉的知道了最简单的开发流程，在route.php编写路由，路由会指向到一个控制器类中的一个方法，在这个方法中，加载对应的视图和传递数据给视图，视图层在继承layout.balde.php文件。就是那么的简单。html

咱们如今来打开layout.balde.php文件，修改里面的内容以下：前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局文件</title>
    <link rel="stylesheet" href="/css/style.css">

    @yield('header')
</head>
<body>

    @yield('content')

    @yield('footer')
</body>
</html>

上面文件的咱们加了一句导入css的代码<link rel="stylesheet" href="/css/style.css">，咱们在app/public下创建css/style.css的css文件,咱们给body标签加个粉色背景，以下：
node

效果以下：
laravel

若是要加载js文件，那也是相同的作法.npm

上面咱们说过正式开发项目的时候，都会使用下Sass,Less,Stylus这些预处理器，咱们看下在Laravel中怎么使用它们.json

咱们打开项目根目录下的gulpfile.js,看里面的这段脚本：gulp

elixir(function(mix) {
    mix.sass('app.sass');  // laravel默认写的是app.scss,我比较喜欢写成app.sass,这里我改过来了
});

laravel自带的elixir能让咱们很轻易的就能使用sass,less了，好比你要用sass,laravel默认已经帮咱们写好了，若是你要用less呢，那只要这么写就行sass

elixir(function(mix) {
    mix.less('app.less');
});

在根目录下还有一个package.json的文件，咱们须要经过npm来安装这些依赖，首先你要保证你的电脑上已经安装了node,咱们可使用node -v来看一下：

➜ node -v    
v7.0.0

➜ npm -v     
3.10.8

若是你尚未安装node, 那么在mac系统中你能够简单的使用brew install node来安装它，或者你也能够访问node的官网查看下怎么安装。

安装完node后，咱们来安装下依赖，咱们知道安装php的包依赖咱们用composer install, 那安装node的依赖也是相同的道理，使用npm install便可

➜  cd /usr/local/var/www/Laravel52 # 进入项目的根目录
➜  npm install  # 安装node依赖包

上面可能的安装可能须要个几分钟，安装完成后，这些第三方包都会被放置在项目根目录下的node_modules中。由于这些第三方包咱们在开发的时候是不能去更改它们的代码的，因此没有必要放置在sublime编辑器中，咱们能够忽略显示它。在sublime中按住command + ,(逗号)调出sublime的配置文件，而后将下面这些内容放到配置文件中：

"folder_exclude_patterns":
    [
        "node_modules",
        "vendor",
    ],

保存便可：

咱们的app.sass文件在resources/assets／sass中，咱们在app.sass中写点测试代码：

$color: blue
body
    color: $color

咱们执行下gulp,刚才我忘记将gulp进行全局安装了，咱们先安装下：

npm install -g gulp

在项目根目录执行gulp

➜ gulp
[14:43:33] Using gulpfile /usr/local/var/www/Laravel52/gulpfile.js
[14:43:33] Starting 'default'...
[14:43:33] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.sass  


Saving To...
   - public/css/app.css  #这里是编译好的css路径

[14:43:35] Finished 'default' after 1.6 s
[14:43:35] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:43:35] Finished 'sass' after 1.76 s

编译好的app.css文件会放置在public/css/路径中, 以下：

上面的css没有通过压缩，发布上线的时候须要压缩下，咱们能够用gulp --production来执行,执行后的app.css内的代码会变压缩成这样:

body{color:blue}

若是想给编译号的文件加上版本号，将gulpfile.js的内容这么修改一下：

elixir(function(mix) {
    mix.sass('app.sass').version('css/app.css');
});

重新gulp后，在public/build/css看到文件名变成相似app-edd03786db.css这样了。

下面咱们将layout.blade.php中换上咱们如今的css路径：

<link rel="stylesheet" href="{{ elixir('css/app.css') }}">

ok,这样就能够了，你们本身去运行一下。

若是是在作前端开发的时候，想要时时的编译css和js,那可使用

gulp watch

当你修改代码保存的时候就会自动编译一下。

好的，本节就到这里。