Continuation gulp Use Getting started three-step compression CSS

Gulp Compression 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 depending on the network)

D:\WAMP\WWW\BOOTSDATATABLE>NPM Install Gulp-minify-css
NPM WARN deprecated [email protected]: use GULP-CLEAN-CSS
[Email protected] D:\wamp\www\BootsDataTable
'---[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 to create a gulpfile.js file to write code

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

Get Gulp
var gulp = require (' Gulp ')

Get MINIFY-CSS module (for compressing CSS)
var minifycss = require (' gulp-minify-css ')

Compress CSS Files
Start this task at the command line using gulp CSS
Gulp.task (' CSS ', function () {
1. Find File
GULP.SRC (' Css/*.css ')
2. Compress files
. Pipe (Minifycss ())
3. Save As compressed file
. Pipe (Gulp.dest (' dist/css '))
})

Start this task at the command line using Gulp Auto
Gulp.task (' Auto ', function () {
Listen for file modification, execute CSS task when file is modified
Gulp.watch (' css/*.css ', [' CSS '])
});

Define default tasks using Gulp.task (' default ')
To start a CSS task and auto task at the command line using Gulp
Gulp.task (' Default ', [' css ', ' auto '])

Third, create CSS file

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

/* A.CSS */
Body a{
Color:pink;
}

Four, run Gulp view effect

Enter Gulp + carriage return at command line

Gulp
[10:48:27] Using gulpfile D:\wamp\www\BootsDataTable\gulpfile.js
[10:48:27] starting ' CSS ' ...
[10:48:27] finished ' CSS ' after 3.83 ms
[10:48:27] starting ' auto ' ...
[10:48:27] finished ' auto ' after MS
[10:48:27] starting ' default ' ...
[10:48:27] finished ' default ' after 11μs

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

Continuation gulp Use Getting started three-step compression CSS