解析Laravel 5 前端工作流

原创 tiangr  2017-03-24 11:33  阅读 177 次

一、句法强大的样式表Sass

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

1.样式文件导入

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

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

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

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

2.变量

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

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

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

3.嵌套

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

4.引用父选择器

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

  1. a{  colorwhite;}a:hover{  colorblue;}

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

  1. a {  colorwhite; &:hover {    colorblue;  }}

嵌套之后,代码量是不是少了很多,而在生成的时候会将嵌套的代码分开成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 codeelixir(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是什么意思呢? 原来是这样的,当下载的东西多了,我们可以使用参数来限制依赖环境。

  1. npm install jquery --save  //依赖 dependencies 方便以后用
  2. npm install jquery --dev   //开发依赖 发布后不需要的
  3. 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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>@yield('title', 'Sample')  - Laravel 入门教程</title>
  5.     <link rel="stylesheet" href="/css/app.css">
  6.   </head>
  7.   <body>
  8.   @include('layouts._header')
  9.     <div class="container">
  10.         <div class="col-md-offset-1 col-md-10">
  11.           @include('shared.messages')
  12.           @yield('content')
  13.           @include('layouts._footer')
  14.         </div>
  15.     </div>
  16.   <script src="/js/app.js"></script>
  17.   </body>
  18. </html>
特别提示:本站资源全部免费下载,因服务器需经费维护,文中部分外链点击后会进入广告,请耐心等待5秒即可跳过广告进入目标页面。如遇页面外链打不开或下载地址失效,您可以在评论中指出错误,或扫描页面底部二维码。
本文地址:http://www.tiangr.com/jie-xi-laravel-5-qian-duan-gong-zuo-liu.html
版权声明:本文为原创文章,版权归 tiangr 所有,欢迎分享本文,转载请保留出处!

发表评论


表情