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

liuchengxu 发布于2019-06-27 15:14 / 525人阅读

摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。

本节将学习 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");
});

四、引入JS文件

如果我们前端需要使用Jquery库，该怎么引入呢？直接使用它的路径在页面引入？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文件即可。

将编译的app.js文件引用到我们的主视图文件中：
views/layouts/default.blade.php



  
    @yield("title", "Sample")  - Laravel 入门教程
    
  
  
  @include("layouts._header")

    
        
          @include("shared.messages")
          @yield("content")
          @include("layouts._footer")

服务器托管专线服务前端工作学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/22270.html

Laravel学习笔记之Session源码解析(上)

摘要：然后中间件使用方法来启动获取实例，使用类来管理主要分为两步获取实例，主要步骤是通过该实例从存储介质中读取该次请求所需要的数据，主要步骤是。说明：本文主要通过学习Laravel的session源码学习Laravel是如何设计session的，将自己的学习心得分享出来，希望对别人有所帮助。Laravel在web middleware中定义了session中间件IlluminateSess...

NervosNetwork 2019-07-01 12:20 评论0 收藏0
Laravel 学习笔记之 request validation

摘要：对于这样嵌套的，使用来校验对象间关系很重要，可以看做是进入核心业务逻辑前的初步校验。。当然最后写表时还有，避免坏数据进入。，总之，在写程序时，很重要，需要去写，包括和。。。在用laravel写api时，当前端传进来的request是POST/PUT/PATH等method时，那需要做request validation，尽管对于前后端分离程序，前端程序Angular/Vue已经做了v...

imingyu 2019-07-01 12:25 评论0 收藏0
SegmentFault 社区访谈 | mcfog：自由进出 Coding && A

摘要：上次的访谈，介绍了下可爱的依云酱，回忆传送门。这里简单地介绍下龙女仆，全名小林家的龙女仆，为什么介绍这部剧呢因为设计狮颜值同学也安利了这部。剧情简介在独身又劳累的小林划重点一名程序员身边突然出现的穿着女仆服装的美少女托尔。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的访谈，介绍了下可爱的依云酱，回忆传送门。不...

neroneroffy 2019-06-28 13:17 评论0 收藏0
SegmentFault 社区访谈 | mcfog：自由进出 Coding && A

摘要：上次的访谈，介绍了下可爱的依云酱，回忆传送门。这里简单地介绍下龙女仆，全名小林家的龙女仆，为什么介绍这部剧呢因为设计狮颜值同学也安利了这部。剧情简介在独身又劳累的小林划重点一名程序员身边突然出现的穿着女仆服装的美少女托尔。 showImg(https://segmentfault.com/img/bVR6p5?w=900&h=385); 上次的访谈，介绍了下可爱的依云酱，回忆传送门。不...

lx1036 2019-08-20 18:30 评论0 收藏0
Laravel学习笔记之Session源码解析(下)

摘要：实际上，在中关闭主要包括两个过程保存当前到介质中在中存入。，学习下关闭的源码吧先。总之，关闭的第二件事就是给添加。通过对的源码分析可看出共分为三大步启动操作关闭。总结本小系列主要学习了的源码，学习了的三大步。说明：在中篇中学习了session的CRUD增删改查操作，本篇主要学习关闭session的相关源码。实际上，在Laravel5.3中关闭session主要包括两个过程：保存当前U...

Awbeci 2019-06-27 14:39 评论0 收藏0