Gulp Study Notes 2

1. Compress CSS

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

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

Before compressing, you need to install a new module and enter the following command line:

NPM Install Gulp-minify-css

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 '))})

At this point, at the command line, enter:

Gulp CSS

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

2. Compress pictures

Compressing picture files can reduce file size and increase picture loading speed.

Target: Locate images/ all the files in the directory, compress them, and store the compressed files in the dist/images/ directory.

Before compressing, you need to install a new module and enter the following command line:

NPM Install Gulp-imagemin

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

//Get GulpvarGulp = require (' Gulp '));//Get gulp-imagemin ModulevarImagemin = require (' gulp-imagemin '))//Compress Picture Tasks//start this task by entering Gulp images on the command lineGulp.task (' images ',function () {    //1. Find the pictureGULP.SRC (' Images/*.* ')    //2. Compress Pictures. Pipe (Imagemin ({progressive:true        }))    //3. Save Picture. Pipe (Gulp.dest (' Dist/images '))});

You can visit gulp-imagemin to see more usage.

At this point, at the command line, enter:

Gulp Images

Create a folder in the gulpfile.js corresponding directory images and images/ store the picture in the directory.

3. Compile Less

Less is a CSS preprocessing language that expands the CSS language, adding features such as variables, mixes (mixin), functions, and so on, making CSS easier to maintain.

Before compiling, you need to install a new module and enter the following command line:

NPM Install Gulp-less

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

//Get GulpvarGulp = require (' Gulp '))//Get gulp-less Modulevarless = require (' gulp-less ')//Compile Less//Enter gulp less on the command line to start this taskGulp.task (' less ',function () {    //1. Find the less fileGULP.SRC (' less/**.less ')    //2. Compiling as CSS. Pipe (Less ())//3. Save File. Pipe (Gulp.dest (' Dist/css '))});

You can visit gulp-less to see more usage.

At this point, at the command line, enter:

Gulp Less

Create a folder in the gulpfile.js corresponding directory dist/css and store the picture in the Dist directory. /css

3\

Gulp Study Notes 2