What does gulp mean in nodejs

gulp is a flow-based code construction tool in the front-end development process. It is an automatic task runner based on Nodejs. It can not only optimize website resources, but also automatically complete the testing and inspection of front-end code. , merge, compress, format, automatically refresh the browser, generate deployment files, and monitor the files to repeat the specified steps after changes. Using it, we can not only write code happily, but also greatly improve our work efficiency.

The operating environment of this tutorial: Windows 7 system, nodejs version 16, DELL G3 computer.

1. What is gulp?

Gulp is a flow-based code construction tool in the front-end development process. It is a tool for building automation projects; it can not only optimize website resources, but also create many duplications during the development process. Tasks can be completed automatically using the right tools; using it, not only can it be a pleasure to write code, but also greatly improve our work efficiency.

Gulp is an automatic task runner based on Nodejs. It can automatically complete the testing, inspection, merging, compression, formatting of front-end code, automatic browser refresh, deployment file generation, and monitor files after changes. Repeat these steps as specified.

2. What is a stream?

Flow, flow, compare files to rivers, then one river flows out and another river flows in. This is how gulp operates on file streams. The output of one operation is used as another The input of the operation is like this

This operation is somewhat similar to jQuery’s chain operation: $("").html("gg").css({}) .parent().find("a").......; When using streams, gulp removes the intermediate files and only writes the final output to disk, making the entire process faster.

3. Gulp installation

Gulp is based on the node environment. First make sure that node

## is installed.

# After node is installed, npm [(node ​​package manager) nodejs package manager, used for node plug-in management (including installation, uninstallation, dependency management, etc.)] is also automatically installed

Since the npm installation plug-in is downloaded from a foreign server, it is greatly affected by the network and may cause abnormalities, so it is best to use cnpm provided by Taobao to install the node plug-in.

Install cnpm: http://npm.taobao.org/

## After installation, check the cnpm version to ensure the installation is successful

Next you can install gulp. First install gulp globally: cnpm install

-

g gulp

Then go to the desktop demo/bbs2.0/src, enter the bash environment, and use cnpm install gulp to install gulp into the current directory

## After successful installation, the node_modules folder will appear, and then create package.json through cnpm init (node ​​project configuration file: Because the node plug-in package is relatively large, version management is not added, and the configuration information is written into the package. .json and add it to version management, other developers can download it accordingly)

Press Enter all the way, and the package.json file will be generated to the current folder. At this time Try to use gulp to start gulp, you will find that an error will be reported

Based on the error message, we need to create a gulpfile.js file

Then run gulp

You will find that the "ok" we need is printed, and gulp can basically work normally at this point.

4. Use of commonly used plug-ins in gulp

　1) Compress merged files

　Create a new index .html file

Create two new js files in the js directory

## Edit the gulpfile file. As follows:

Since we use two plug-ins, gulp-uglify and gulp-concat, we must first install these two plug-ins into the current directory

When installing the plug-in, use --save-dev to add it to package.json. We can check whether the file is successfully written to package.json

OK, if you have it, then continue to install gulp-concat to the directory. After the installation is completed, we click on node_modules and we will find that the plug-in is successfully installed. Now let’s start gulp

OK, if no error is reported, it means success. Next, check the file and find that there are all.min.js files under src that we want to compress and merge

　　

2)gulp-sass

　To install sass, you must first install ruby ​​and enter the sass tutorial

Click Install and you will be given instructions on how to install sass and ruby ​​

## After ruby ​​is installed successfully, check the ruby ​​version

After success, install sass through gem

If you need to use compass (the relationship between compass and sass is equivalent to jQuery and js), install compass by the way

What needs to be noted here is the problem with the gem source, which will cause the installation to fail: an error will be reported: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: ce rtificate verify failed error. You can change the gem source to https://ruby.taobao.org/. If it still doesn’t work, change it to http://gems.ruby-china.org/. If it still doesn’t work, it’s a character issue.

Next, use compass create to create a sass project

## After successful creation, three files, sass, stylesheets, and config.rb will be automatically generated

Open the sass file Any file, edit

Then edit gulpfile

Then install gulp-sass and gulp-compass to the current directory

After starting gulp, check the corresponding files in stylesheets

Okay, sass has been successfully compiled into css

　　

3) Compress css through gulp-minify-css

　After starting gulp

　　　4) Use gulp-load-plugins to help us load plug-ins

　　　gulp-load-pluginsThis plug-in can automatically help us You load the gulp plugin in the package.json file

We only need to require('gulp-load-plugins')();# in the gulpfile

## You only need to use plugin.** below (multiple words are named in camel case)

　　

5) gulp-imagemin and imagemin-pngquant compress images

　　

6)gulp-livereload to automatically refresh the web page

　　First installation gulp-livereload:cnpm install gulp gulp-livereload, where compressed HTML and compiled and compressed sass are listed as

　 Then go to the gulpfile

## To successfully implement Refresh

1. You also need the support of the chrome plug-in livereload, so go over the wall

2. Open the web page in the server environment

For more node-related knowledge, please visit:

nodejs tutorial

!

The above is the detailed content of What does gulp mean in nodejs. For more information, please follow other related articles on the PHP Chinese website!