Laravel学习笔记三-前端工作流

小赵

小赵

发表于 2017-01-11 20:55:55
内容来源: 网络

本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。

一、句法强大的样式表Sass

Sass 是一种可用于编写CSS的语言,借助 Sass 我们可以少写很多CSS代码,并使样式代码的编写更加灵活多变,如可以按照Sass的语法使用变量,继承父类样式特点,等我们在Sass写完样式之后,然后使用gulp工具编译,就可以生成CSS代码文件。

1.样式文件导入

Sass 使用 @import来导入其它的样式文件。如:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

上面代码将导入存放在 node_modules/bootstrap-sass/assets/stylesheets/bootstrap 文件夹中的所有样式文件。你也可以使用下面代码来对单独一个文件进行导入:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss";

2.变量

Sass支持在代码中加入变量,所有的变量都以$开头,这和PHP的变量命名方式一样。

$navbar-color: #3c2e43;
.navbar-inverse {
  background-color: $navbar-color;
}

上面代码定义了一个 $navbar-color 颜色变量,在编译成功之后,变量将被替代为它所对应的值。

3.嵌套

Sass 还允许你在选择器中进行相互嵌套,以减少代码量。

4.引用父选择器

还可以在 Sass 嵌套中使用 & 对父选择器进行引用:

a {
  color: white;
}

a:hover {
  color: blue;
}

使用嵌套,上边的代码可写为:

a {
  color: white;
  &:hover {
    color: blue;
  }
}

嵌套之后,代码量是不是少了很多,而在生成的时候会将嵌套的代码分开成CSS规则的样式。

二、包管理工具NPM, Yarn

1、NPM

NPM 是 Node.js 的包管理和分发工具,其强大的功能也是 Node.js 能够如此成功的因素之一。在使用 NPM 安装第三方模块(也可理解为扩展包)时,你需要在 package.json 中对要安装的模块指定好名称和版本号。然后运行下面命令进行安装:

npm install

在开始安装之前,npm install 命令会先检查 node_modules 文件夹是否已存在要安装的模块,如果该模块已安装,则跳过,接着安装下一模块。安装完成后,所有的第三方模块都将被下载到 node_modules 文件夹中。你也可以使用下面命令来强制安装所有模块,不管该模块之前是否安装过:

$ npm install -f

由于国内墙的原因,使用npm install安装会非常缓慢,慢到想切JJ,不过还好,我们可以使用淘宝提供的国内镜像进行下载。

淘宝NPM镜像使用方法

1、安装淘宝镜像cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用cnpm安装包:

$ cnpm install [name]

2、Yarn

Yarn 是 Facebook 在 2016 年 10 月开源的一个新的包管理器,用于替代现有的 NPM 客户端或者其他兼容 NPM 仓库的包管理工具。Yarn 在保留 NPM 原有工作流特性的基础上,使之变得更快、更安全、更可靠。Yarn和NPM的用法基本相同。

我们可通过下面命令来安装当前项目的所有包:

$ yarn install

或是使用下面这种更加简洁的命令:

$ yarn

另外,我们也可以通过下面命令来添加指定的包:

$ yarn add [package]

三、Gulp,laravel-elixir

Gulp 是一个使用 JavaScript 编写的自动化构建工具。用于对前端通用任务(如最小化、压缩、编译)进行自动构建。Gulp 还可以用来监控源代码的改动并自动运行任务。

Laravel 5.1 提供了一个封装 Gulp 的 Laravel Elixir 包,可用于轻松构建 Gulp 任务,Elixir 为 Gulp 添加了优雅的语法,Elixir 之于 Gulp 正如 Laravel 之于 PHP

Laravel 已默认为我们生成了 gulpfile.js 文件,并集成了 laravel-elixir 模块。
gulpfile.js

var elixir = require('laravel-elixir');
// somgthing code
elixir(function(mix) {
    mix.sass('app.scss');
});

我们可以在 Gulp 中使用 require 对模块进行引用。

由于 Laravel 已默认集成了 laravel-elixir 模块来帮助开发者更好的使用 Gulp.

laravel-elixir

laravel-elixir 提供了一套简洁流畅的 API 来帮助 Laravel 开发者在项目中更加轻松的定义一些的基本的 Gulp 任务。在我们应用的 gulpfile.js 文件中,Laravel 已默认帮我们设置好了对 Sass 文件的编译:

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

内容来源:https://segmentfault.com/a/1190000008082202

用户评论
开源开发学习小组列表