bower 使用scss_使用Bower管理前端资源

bower 使用scss

Bower is a package manager for the web that is built by Twitter. Now what does this mean? It seems like there are package managers everywhere now. Composer for PHP, npm for Node, and RubyGems for Ruby. It can get confusing when trying to understand them all and what they actually do if you haven't had any experience with them.

Bower是Twitter构建的Web程序包管理器。 现在这是什么意思？ 似乎现在到处都有软件包管理器。 适用于PHP的Composer，适用于Node的npm和适用于Ruby的RubyGems。 如果您不了解它们的全部内容以及它们的实际用途，可能会造成混淆。

为什么要使用凉亭？ (Why Use Bower?)

There are plenty of reasons to use a package manager like Bower.

有很多理由使用像Bower这样的软件包管理器。

• If you are tired of going to find every package you want, download, and drag them to your project every time.
  如果您厌烦了要查找所需的每个软件包，请每次下载并将它们拖到项目中。
• If you want a specific version of a resource across all your projects.
  如果要在所有项目中使用特定版本的资源。
• If you just want a simpler way to get all the packages you need.
  如果您只是想以一种更简单的方式来获取所需的所有软件包。

快速范例 (Quick Example)

Sure that all sounds good. But how does it work? Let's say you want to include jQuery in your current project.

当然，一切听起来不错。 但是它是如何工作的呢？ 假设您要在当前项目中包含jQuery 。

The Normal Way: You would go to jQuery.com, find a download link, press download, unzip the folder, and then drag the file you want into your project. Sure you could use a CDN delivered resource by using something like Google CDN, but you still have to go find that URL (not a big deal sure, but let's play along).

正常方式 ：您将转到jQuery.com ，找到一个下载链接，按下载，将文件夹解压缩，然后将所需的文件拖到项目中。 当然，您可以通过使用Google CDN之类的东西来使用CDN交付的资源，但是您仍然必须去找到该URL（虽然没什么大不了的，但是让我们一起玩）。

The Bower Way: bower install jquery. Just type that in your console and the resources for jQuery are pulled into a bower_components folder in your project.

Bower方式 ： bower install jquery 。 只需在您的控制台中键入该内容，然后jQuery的资源bower_components放入您项目中的bower_components文件夹中。

You can then link directly to that file and you're done!

然后，您可以直接链接到该文件，您就完成了！

安装凉亭 (Install Bower)

To use bower you will need Node.js and npm (Node's package manager that is included in the install). Go ahead and download Node and install it.

要使用Bower，您将需要Node.js和npm（安装中包含的Node的软件包管理器）。 继续并下载Node并安装它。

You can check your versions by typing node -v and npm -v to make sure they were installed correctly.

您可以通过输入node -v和npm -v来检查版本，以确保它们已正确安装。

Once you have node and npm installed, we will need to install bower. Since it is an npm package, we can just type:

安装完node和npm后，我们将需要安装bower 。 由于它是一个npm软件包，因此我们可以输入：

npm install -g bower

npm install -g bower

Now we have bower installed! The -g modifier is so that we install bower globally and can use it anywhere in our system.

现在我们已经安装了凉亭！ -g修饰符使我们可以全局安装bower，并可以在系统中的任何位置使用它。

With Bower installed, let's get to using it.

安装Bower后，让我们开始使用它。

安装套件 (Installing Packages)

Now you can simply use bower install <package> to install the package you need. You can use this for packages like:

现在，您可以简单地使用bower install <package>安装所需的软件包。 您可以将其用于以下软件包：

• jQuery
  jQuery的
• Angular
  角度的
• Font Awesome
  字体很棒
• Animate.css
  Animate.css
• So many more...
  还有更多...

You can install by the name of a package (jquery), a git repository (git://github.com/someone/some-package.git), or even a shorthand repository on Github (username/package-name).

您可以通过软件包的名称（ jquery ），git存储库（ git://github.com/someone/some-package.git ）甚至在Github上的简写存储库（ username/package-name ）进行安装。

安装特定版本 (Installing a Specific Version)

If you need a specific version of a package you can install using the version number.

如果您需要特定版本的软件包，则可以使用版本号进行安装。

bower install jquery#1.8.3

bower install jquery#1.8.3

This will pull in a specific version of the package you want.

这将提取您想要的软件包的特定版本。

搜索包 (Searching for Packages)

If you aren't sure if a package exists, just type bower search <package name>. If you wanted to list all packages, just type bower list.

如果不确定是否存在软件包，只需键入bower search <package name> 。 如果要列出所有软件包，只需键入bower list 。

Now that we've gone through the basic features of Bower, let's see how we can really use it for a project we are working on.

现在，我们已经了解了Bower的基本功能，让我们看看如何将其真正用于正在开发的项目中。

You can also visit the bower components site and see the packages there.

您也可以访问Bower组件站点并在此处查看软件包。

为项目设置Bower (Setting Up Bower for a Project)

To use Bower in a project, you will need two files:

要在项目中使用Bower，您将需要两个文件 ：

• .bowerrc The file to tell Bower where to install files.
  .bowerrc告诉Bower文件安装位置的文件。
• bower.json The file that tells Bower which packages we need.
  bower.json告诉Bower我们需要哪些软件包的文件。

定义凉亭目录 (Define Bower Directory)

The default directory that Bower installs packages into (bower_components) isn't always wanted. To change the default directory that Bower installs into, we will create a .bowerrc file.

并非总是需要Bower将软件包安装到的默认目录（ bower_components ）。 要更改Bower安装的默认目录，我们将创建一个.bowerrc文件。

// .bowerrc
{
    "directory": "libs"
}

Now, our packages will be installed into our libs folder. Now let's talk about installing multiple packages at the same time.

现在，我们的软件包将安装到我们的libs文件夹中。 现在让我们讨论一下同时安装多个软件包。

安装多个软件包 (Install Multiple Packages)

Usually for a project you will have more than one resource that you'll want to pull in. It isn't that convenient to type bower install for every package that we want.

通常，对于一个项目，您将拥有不止一个资源，您不希望将其引入。为每个想要的软件包键入bower install并不方便。

It's more desirable to define a file that will name all the packages we need. This is how many of the package managers are handled. We will define a specific file that will name all the packages we need.

最好定义一个文件来命名我们需要的所有软件包。 这就是要处理的软件包管理器的数量。 我们将定义一个特定的文件，该文件将命名我们需要的所有软件包。

Let's create our bower.json file and that will name all the packages we need.

让我们创建我们的bower.json文件，它将命名我们需要的所有包。

// bower.json
{
    "name": "sample-app",
    "version": "1.0.0",
    "dependencies": {
        "bootstrap": "latest",
        "font-awesome": "latest",
        "animate.css": "latest",
        "angular": "latest"    
    }
}

Now to install these files, we will go into our console and type:

现在要安装这些文件，我们将进入控制台并键入：

bower install

bower install

Just like that, Bower will look at our bower.json file and install all the files we need into our libs folder.

就像那样，Bower将查看我们的bower.json文件并将所需的所有文件安装到我们的libs文件夹中。

使用我们的Bower软件包 (Using Our Bower Packages)

Now that we have our packages that we need in our project. All we need to do is link to them. It may seem weird to have all the files that jQuery provides but that is how Bower works and it can help to have some of the files pulled in.

现在我们有了我们项目中需要的软件包。 我们需要做的就是链接到他们。 拥有jQuery提供的所有文件似乎很奇怪，但这是Bower的工作方式，并且可以帮助拉入一些文件。

To use the files, just link to them in your document:

要使用文件，只需在文档中链接到它们：

<!-- index.html -->
<!doctype>
<head>
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="libs/animate.css/animate.min.css">

    <script src="libs/jquery/jquery.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/angular/angular.min.js"></script>
</head>

...

做完了！ (Done!)

Just like that you can pull in all the files that you need for your project. No more going searching for the specific package you need. Define a bower.json file and you are good to go.

这样，您就可以提取项目所需的所有文件。 不再需要寻找所需的特定包装。 定义一个bower.json文件，一切就好了。

This article only touches on the many things you can do with Bower. I would definitely suggest to go and look at the official docs to see the configuration options and different ways you can use bower.

本文仅涉及您可以使用Bower进行的许多操作。 我绝对建议您去看看官方文档 ，看看配置选项和使用Bower的不同方法。

翻译自: https://scotch.io/tutorials/manage-front-end-resources-with-bower

bower 使用scss