Laravel学习笔记三-前端工作流
脚本宝典收集整理的这篇文章主要介绍了Laravel学习笔记三-前端工作流，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本节将学习 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，不过还好，我们可以使用淘宝提供的国内镜像进行下载。
1、安装淘宝镜像cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org2.使用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');
});四、引入JS文件
如果我们前端需要使用jquery库，该怎么引入呢？直接使用它的路径<script src="/js/jquery.js"></script>在页面引入？NO，这种方法太老土了，我们可以使用强大的gulp前端工具，对前端需要的JS文件进行整合，然后使用整合编译后的app.js文件，这样可以大大减少前端的工作量。
1.使用NPM来为应用添加jQuery 模块
cnpm install jquery --save
npm后边的--save是什么意思呢? 原来是这样的，当下载的东西多了,我们可以使用参数来限制依赖环境。
npm install jquery --save //依赖 dePEndencies 方便以后用
npm install jquery --dev //开发依赖 发布后不需要的
npm install jquery -g // 全局安装，在哪都能用当使用上边的命令安装好后，我们打开package.json来看看：
{
"PRivate": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"jquery": "^3.1.1",
"laravel-elixir": "^4.0.0"
}
}
jquery被安装在开发依赖dependencies中。
2.导入jquery及编辑gulpfile.js文件
安装完成之后，我们需要新建一个 app.js 文件来导入 Bootstrap 和 jQuery 的模块。
resources/assets/js/app.js
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
$(document).ready(function() {
});最后，我们还需要使用 Gulp 对 app.js 文件进行模块打包。
gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss')
.browserify('app.js');
});Elixir 的 browserify 方法，给予你在浏览器引入模块及 ECMAScript 6 的有用的特性。此任务假设你的脚本都保存在 resources/assets/js，并会将生成的文件放置于 public/js/app.js.
3.gulp编译文件
gulp编译文件
vagrant@homestead:~/Code/sample$ gulp
我们可以看到，编译后生成public/js/app.js文件，我们可以在需要引入的页面，直接使用下面的方法引入编译好的js文件即可。
<script src="/js/app.js"></script>将编译的app.js文件引用到我们的主视图文件中：
views/layouts/default.blade.php
