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

當你修改代碼保存的時候就會自動編譯一下。

好的，本節就到這裏。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。