如何使用正确的姿势在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,327评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 954评论 0 3
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,997评论 4 50
  • 1.背景介绍 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而...
    cczhuc阅读 954评论 0 0
  • 那些被岁月碾压过的表情 那些被岁月轻踩在脚下的灵魂 那些在小角落里生存的人 乱乱的头发 憔悴的表情 穿着没有年代历...
    戎鱼阅读 304评论 3 4