Using Gulp to compress CSS

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.