Shulou(Shulou.com)06/01 Report--

Some time ago, I worked on a project and tried to use gulp to build the front-end code. Today is a brief summary:

One: install the gulp environment

1. Install node

In the node official document download matching version, I downloaded the version as shown below. Http://nodejs.cn/download/

After downloading, you can always click next to install by default

Once installed, type cmd in the console, open a command prompt, and type node-v to see if node has been successfully installed and the version of node.

two。 Global installation of gulp

Enter npm install gulp-g at the command prompt

Second: project process

1. Generate the package.json files required by the project

For example: my local project is placed in D:\ maxiaodan\ project\ webapp, find this directory, type cmd in the address bar, or enter the project directory through the cd command.

Type npm init and press enter all the time to generate the package.json file automatically (one node package has 2 dependencies, one is dependencies: the dependencies are the dependencies needed to run the package properly. One is devDependencies: dependencies needed for development, such as packages such as unit tests. If you are simply using this package without doing some change testing, you can just install dependencies)

The generated package.json file is shown in the following figure:

two。 Install gulp in the root directory of the project

Install only dependencies npm install gulp-- save

Install devDependencies npm install gulp-- save-dev

Execute the command npm install gulp-- save to install gulp. After completion, a folder of node_modules will be generated in the root directory of the project

3. Install the plug-ins required by the project

Npm install del-- save deletes files

Npm install gulp-jshint-save js code review plug-in

Npm install gulp-concat-save merge code

Npm install gulp-util-- the most basic tool of save

Npm install gulp-sequence-save controls the sequential or parallel execution of multiple tasks.

You may encounter this prompt during installation

We can reinstall the plug-in and install the 1.0 + version of the plug-in

Execute the command npm install gulp-jshint@1.*-- save

4. Configure the gulpfile.js file for the project

Create a new gulpfile.js file in the root directory of the project

Once configured, execute gulp at the command prompt, that is, enter gulp

It is incorrect that the result as shown above will appear.

Reinstall the del plug-in, version 1.0 +, execute gulp again, it will show success

After executing gulp, you will find that under your project directory, a dist folder with an index.js file will be automatically generated.

We create a new folder under the project to store the js files

It is important to note that in html, you only need to bring in the index.js in the dist folder.

Whenever you modify the js file, type gulp in the console to package, and gulp will package all the .js files in the atae folder into the index.js file in the dist folder. So you only need to import the index.js file into your html file.

Every time you modify it, you have to compile it manually, which is too troublesome. We can make slight changes to the gulpfile.js file, listen for changes in the js file, and compile automatically whenever there are changes to the js file, without the need for the user to compile manually.

When you execute gulp again, you will find that the mouse cursor of the console stays at the end.

The console compiles automatically whenever the js file changes. At the same time, if there is an error in the js file, the console will provide the error information in real time, and the index.js file in the dist file will not be generated.

Another: if you think the file name index.js is not good, you can modify it yourself, and modify the index.js in the package.json folder and the index.js in the gulpfile.js folder at the same time.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.