如何用gulp缩小CSS (How to minify your CSS with gulp)

In this article, I'm going to show a simple way to automatically minify your CSS files using gulp. ?

在本文中，我将展示一种使用gulp自动缩小CSS文件的简单方法。？

首先-什么是gulp？ (To start — what is gulp?)

Gulp is a JavaScript task runner that lets you automate tasks such as…

Gulp是一个JavaScript任务运行程序，可让您自动执行诸如...的任务。

Bundling and minifying libraries and stylesheets.
捆绑和最小化库和样式表。
Refreshing your browser when you save a file.
保存文件时刷新浏览器。
Quickly running unit tests.
快速运行单元测试。
Running code analysis.
运行代码分析。
Less/Sass to CSS compilation.
更少/不满意CSS编译。
And much more!
以及更多！

The gulp workflow works as follows:

gulp工作流程如下：

We can create tasks that we would like to fulfill. In these tasks we load files that we want gulp to work on (modifying or not), then we return them to some return folder.

我们可以创建我们想要完成的任务。在这些任务中，我们加载希望gulp处理的文件(是否修改)，然后将它们返回到某个return文件夹。

It’s simple.

这很简单。

In this little tutorial, I will teach you how to create a task to minify all CSS files in your folder. Then put the minified ones in another folder.

在这个小教程中，我将教您如何创建任务以最小化文件夹中的所有CSS文件。然后将缩小的放在另一个文件夹中。

开始吧 (Let’s start)

For this tutorial, make sure you have the latest version of the npm package installed on your machine. If you do not have it, you can download it here.

对于本教程，请确保您在计算机上安装了最新版本的npm软件包。如果没有它，可以在此处下载。

Once you have npm installed, in the base directory of your project we will install gulp using these commands:

安装npm后，在项目的基本目录中，我们将使用以下命令安装gulp：

npm install gulp-cli -g

npm install gulp -D

We will also use a gulp plugin to minify CSS called gulp-clean-css, so install it in the project type:

我们还将使用一个gulp插件来缩小CSS，称为gulp-clean-css ，因此将其安装在项目类型中：

npm install gulp-clean-css --save-dev

Very good, now with the dependencies installed in the project, let’s create a file called Gulpfile.js. This file will be responsible for our tasks.

很好，现在已经在项目中安装了依赖项，让我们创建一个名为Gulpfile.js的文件。该文件将负责我们的任务。

We will create two folders in this repository too. One will be called styles where our style files will stay, and another called dist where the minified files will go.

我们还将在此存储库中创建两个文件夹。一种将称为样式，我们将保留样式文件，另一种将称为dist，将缩小的文件保留在其中。

In the end, our project will have this structure:

最后，我们的项目将具有以下结构：

在Gulpfile.js中 (In Gulpfile.js)

At the beginning of the file, we make the calls of the packages that we will use.

在文件的开头，我们将调用要使用的软件包。

With the packages called, we will create the responsible task by minifying our files.

调用软件包后，我们将通过缩小文件来创建负责任的任务。

You might be wondering — you’re already able to minify your files? Yes, by executing the gulp command in the terminal followed by the task name.

您可能想知道-您已经可以缩小文件了吗？是的，通过在终端中执行gulp命令，后跟任务名称。

But running this command all the time is a bit annoying, isn’t it? We can create a method for observing changes to files in the styles folder.

但是一直运行该命令有点烦人，不是吗？我们可以创建一种方法来观察样式文件夹中文件的更改。

In this way, running the gulp command will wait for changes in the selected files to activate the minify-css task.

这样，运行gulp命令将等待所选文件中的更改以激活minify-css任务。

结论 (Conclusion)

This is just a small way that gulp can help us in the development of our applications.

这只是gulp可以帮助我们开发应用程序的一种小方法。

You can find the code for this project in this repository on GitHub.

您可以在GitHub上的此存储库中找到该项目的代码。

Thank you for reading, please feel free to ? and help others find it.

感谢您的阅读，请随时？ 并帮助其他人找到它。

See you soon. ?

再见。 ？

参考文献 (References)

gulp.jsBy preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like…gulpjs.comgulp-clean-cssMinify css with clean-css.www.npmjs.com

gulp.js 通过优先使用代码而不是配置，节点最佳实践和最小的API界面 -gulp 使事情变得简单，如... gulpjs.com gulp -clean- css使用clean-css 缩小 CSS。 www.npmjs.com