Yarn和nmp使用

1. nmp 是什么?

Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的,NPM 是 Node.js(一个基于 Google V8 引擎的 JavaScript 运行环境)的包管理和分发工具。 NPM 是 Node.js 的包管理和任务管理工具,其强大的功能也是 Node.js 能够如此成功的因素之一。在使用 NPM 安装第三方模块(也可理解为扩展包)时,你需要在 package.json 中对要安装的模块指定好名称和版本号。然后运行下面命令进行安装:

npm install

强制安装所有模块,不管该模块之前是否安装过:

npm install -f

由于国内的网络环境原因,我们在使用 NPM 安装第三方模块时会耗费较长时间,为此我们可通过淘宝提供的 cnpm 镜像来解决该问题,如安装第三方模块时可使用下面命令替代:

cnpm install

npm 安装国内淘宝镜像

npm config set registry "https://registry.npm.taobao.org"

2. Yarn 是什么?

由于 NPM 的安装速度,安全性和稳定性等都饱受开发者的诟病,因此我们改用 Facebook 在 2016 年的 10 月份开源的 Yarn 来作为 NPM 的替代品

  • 使用 Yarn 对扩展包进行安装
    // 在项目根目录下运行以下命令进行安装:
    (windows系统下不支持软连接,因此需要加上:--no-bin-links 参数)
    yarn install --no-bin-links
    yarn add cross-env
  • 安装完成之后,让我们对 Laravel 默认生成的 app.scss 文件进行编辑,删除此文件里的所有内容,只留下面一行,导入 Bootstrap:

文件路径为:resources/assets/sass/app.scss

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

细心的你可能会发现上面新建的样式文件后缀名(.scss)有别我们之前经常看到的样式文件后缀名(.css),这是因为 .scss 是 Sass(一种 CSS 开发工具)专属的文件格式。 将 Bootstrap 导入成功之后,我们需要使用以下命令来将 .scss 文件编译为 .css 才能正常使用,编译命令如下:

npm run dev

我们也可以通过下面的命令,在每次检测到 .scss 文件发生更改时,自动将其编译为 .css 文件:

npm run watch-poll

watch-poll 会在你的终端里持续运行,监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。

3. Laravel Mix 是什么?

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。我们可以在 webpack.mix.js 文件中制定一些如资源文件的编译、压缩等任务。Laravel 已默认为我们生成了 webpack.mix.js 文件,并集成了 laravel-mix 模块。

开始使用 Mix
  • 使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 Yarn 配置安装加速:

    yarn config set registry https://registry.npm.taobao.org
  • 使用 Yarn 安装依赖:

    yarn install
  • 安装成功后,运行以下命令即可:

    npm run watch-poll

SASS 语法基础

Sass 是一种可用于编写 CSS 的语言,起初由 Hampton Catlin 进行设计并由 Natalie Weizenbaum 开发。借助 Sass 我们可以少写很多 CSS 代码,并使样式代码的编写更加灵活多变。接下来我们将对 Sass 的几个主要功能进行讲解。

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 还允许你在代码中加入变量,所有的变量均以 $ 开头。

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

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

3.嵌套

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

body div {
  color: red;
}

body h1 {
  margin-top: 10px;
}

可写成:

body {
  div {
    color: red;
  }

  h1 {
    margin-top: 10px;
  }
}

4.引用父选择器

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

a {
  color: white;
}

a:hover {
  color: blue;
}

可改写为:

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