如何使用正確的姿勢在laravel框架中管理CSS

環境準備

node -v 檢查node.js的版本
npm -v

注:node.js 5.0 版本之后就自帶了npm
可以去node.js的官網:nodejs.org 去下載

當然我們需要使用gulp 進行管理
$ npm install --global gulp 全局安裝gulp
$ npm install --save-dev gulp 針對每一個項目進行安裝

之后,可以輸入 npm install 把 laravel 中的 elixir 所有的依賴都下載下來,
在laravel 項目中找到 gulpfile.js

elixir(function (mix) {
    mix.sass('app.scss');
});

這里面有很多自定義實際應用場景,譬如:

elixir(function (mix) {
    mix.sass(['app.scss' , 'font.scss']);
//傳入一個數組,會讓兩個scss文件生成在同一個css文件下
});

還有

elixir(function (mix) {
    mix.sass(['app.scss','font.scss'] , 'public/style/style.css');
//指定生成在哪一個目錄下
});

同時,還可以使用多個.sass進行多文件的操作

注意:當產品上線的時候,可以執行gulp --production 對編譯后的文件進行壓縮

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數,API也非常簡單,學...
    井皮皮閱讀 1,323評論 0 10
  • gulpjs是一個前端構建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數,API也非常簡單,學...
    小裁縫sun閱讀 952評論 0 3
  • 前言 本文默認你已經安裝好node環境,并且熟悉node命令,和window cd命令。 gulp簡介 基于nod...
    9I閱讀 1,992評論 4 50
  • 1.背景介紹 gulp是前端開發過程中對代碼進行構建的工具,是自動化項目的構建利器;它不僅能對網站資源進行優化,而...
    cczhuc閱讀 937評論 0 0
  • 那些被歲月碾壓過的表情 那些被歲月輕踩在腳下的靈魂 那些在小角落里生存的人 亂亂的頭發 憔悴的表情 穿著沒有年代歷...
    戎魚閱讀 295評論 3 4