當前位置：首頁 >

gulp编译css_如何用gulp缩小CSS

發布時間：2023/11/29 83 豆豆

生活随笔收集整理的這篇文章主要介紹了 gulp编译css_如何用gulp缩小CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

gulp編譯css

by Vinicius Gularte

由Vinicius Gularte

如何用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

翻譯自: https://www.freecodecamp.org/news/how-to-minify-your-css-with-gulp-6ff3f4a896b5/