Be sure to read this section after you understand the following chapters:
- Installing Node and Gulp
- 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