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

时间 2019-11-16

标签 laravel 学习笔记前端繁體版

原文原文链接

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

1、句法强大的样式表Sass

Sass 是一种可用于编写CSS的语言，借助 Sass 咱们能够少写不少CSS代码，并使样式代码的编写更加灵活多变，如能够按照Sass的语法使用变量，继承父类样式特色，等咱们在Sass写完样式以后，而后使用gulp工具编译，就能够生成CSS代码文件。css

1.样式文件导入

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

@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的变量命名方式同样。node

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

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

3.嵌套

Sass 还容许你在选择器中进行相互嵌套，以减小代码量。laravel

4.引用父选择器

还能够在 Sass 嵌套中使用 & 对父选择器进行引用：npm

a {
  color: white;
}

a:hover {
  color: blue;
}

使用嵌套，上边的代码可写为：json

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

嵌套以后，代码量是否是少了不少，而在生成的时候会将嵌套的代码分开成CSS规则的样式。gulp

2、包管理工具NPM, Yarn

一、NPM

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

npm install

在开始安装以前，npm install 命令会先检查 node_modules 文件夹是否已存在要安装的模块，若是该模块已安装，则跳过，接着安装下一模块。安装完成后，全部的第三方模块都将被下载到 node_modules 文件夹中。你也可使用下面命令来强制安装全部模块，无论该模块以前是否安装过：

$ npm install -f

因为国内墙的缘由，使用npm install安装会很是缓慢，慢到想切JJ，不过还好，咱们可使用淘宝提供的国内镜像进行下载。

淘宝NPM镜像使用方法

一、安装淘宝镜像cnpm

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

2.使用cnpm安装包：

$ cnpm install [name]

二、Yarn

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

咱们可经过下面命令来安装当前项目的全部包：

$ yarn install

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

$ yarn

另外，咱们也能够经过下面命令来添加指定的包：

$ yarn add [package]

3、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');
});

4、引入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

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Sample')  - Laravel 入门教程</title>
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
  @include('layouts._header')

    <div class="container">
        <div class="col-md-offset-1 col-md-10">
          @include('shared.messages')
          @yield('content')
          @include('layouts._footer')
        </div>
    </div>

  <script src="/js/app.js"></script>
  </body>
</html>