Using Gulp to compress CSS

Be sure to read this section after you understand the following chapters:

1. Installing Node and Gulp
2. Use Gulp to compress JS

Compressing the CSS code can reduce the size of the CSS file and improve the page opening speed.

We then convert the rule to Gulp code.

Law

Locate css/ all the CSS files in the directory, compress them, and store the compressed files in the dist/css/ directory.

Gulp Code

When you are familiar with the method of compressing JS using gulp, it is easy to configure the Gulp code for compressing CSS.

First, install the GULP-MINIFY-CSS module

Tip: You need to use the command line cd to switch to the corresponding directory after the installation operation.

At the command line, enter

NPM Install Gulp-minify-css

After successful installation you will see the following information: (Installation time may be longer)

[email protected] node_modules/gulp-minify-css├── [email protected]├── [email protected] ([email protected])├── [email protected] ([email protected], [email protected])├── [email protected] ([email protected], [email protected])├── [email protected] ([email protected])└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

Second, reference the use of Gulp compression JS Create a gulpfile.js file to write code

Create the file in the corresponding directory gulpfile.js and write the following:

//Get GulpvarGulp = require (' Gulp '))//get MINIFY-CSS module (for compressing CSS)varMinifycss = require (' gulp-minify-css '))//Compress CSS Files//start this task at the command line using Gulp CSSGulp.task (' CSS ',function () {    //1. Locate the fileGULP.SRC (' Css/*.css ')    //2. Compressing files. Pipe (Minifycss ())//3. Save as a compressed file. Pipe (Gulp.dest (' Dist/css '))})//start this task at the command line using Gulp AutoGulp.task (' Auto ',function () {    //Listen for file modification, execute CSS task when file is modifiedGulp.watch (' css/*.css ', [' CSS '])});//define default tasks using Gulp.task (' Default ')//to start a CSS task and auto task at the command line using GulpGulp.task (' Default ', [' css ', ' auto '])

You can visit gulp-minify-css to see more usage.

Third, create CSS file

Create a folder in the gulpfile.js corresponding directory css and css/ create a file in the directory a.css .

/** *body a{    color:pink;}

Four, run Gulp view effect

On the command line enter gulp + carriage return

You will see the following prompt on the command line

gulp[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js[17:01:19] Starting ‘css‘...[17:01:19] Finished ‘css‘ after 6.21 ms[17:01:19] Starting ‘auto‘...[17:01:19] Finished ‘auto‘ after 5.42 ms[17:01:19] Starting ‘default‘...[17:01:19] Finished ‘default‘ after 5.71 μs

Gulp creates a dist/css directory and creates a a.css file that holds the compressed CSS code.

Then read: Compress pictures with gulp

Using Gulp to compress CSS