Front end environment installation

Time:2021-2-23

node

node -v

  • Gohttps://nodejs.org/en/Download the installation file and install it.
  • After the installation, enter thenode -vPress enter to print out the version number of nodejs, indicating that nodejs is installed successfully.
  • Input at terminalnpm -v

Press enter to print out the version number of NPM, which indicates that NPM has been successfully installed (NPM has been integrated in node installation package, so NPM is installed as well as nodejs).

npm

npm -v

becausehttps://www.npmjs.comDomestic visit is not stable, so it is recommended to use domestic mirror sitehttps://npm.taobao.org
The specific methods are as follows:

This is npmrc found in windows. I haven’t found it under MAC yet.

gulp

  • Input at terminalnpm install gulp -g
  • After the installation, enter thegulp -vIf the corresponding version number is output, the installation is successful.

At this point, gulp installation is complete

  1. Configuration items

Here is a simple case to demonstrate: create a gulp folder as the root directory of the project, and the project structure is as follows:!
Front end environment installation

We take gulp uglify, gulp concat and gulp minify CSS as examples.
First, configuration package.json File, there are three ways:

  • You can create one with Notepad or something
  • Using NPM init to build
  • You can also copy the previously created project package.json

We use the NPM init method to create the package.json
Switch the current directory to the project directory in the terminal, and then input thenpm init, enter all the way, and finally generate in the root directory of the project package.json :

{
  "name": "gulp_ "Test", / * project name, please remember that the name here should not be the same as that of the module. For example, if it is named gulp, there will be an error when installing gulp*/
  "Version": "1.0.0", / * version number*/
  "Description": ", / * description*/
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "Author": ", / * author*/
  "License": "ISC" / * project license agreement*/
}

Comments are added by myself. NPM init generation has no comments, and JSON files do not support comments. Please note!

  1. Local installation of gulp and gulp plug in

Install gulp locally

npm install gulp --save-dev 

After the installation, let’s look at the changes in the project:
As shown in the figure:

  1. Download the gulp module to the node in the project_ Modules folder.
  2. package.json The devdependencies field is written in, and the gulp module name is filled under the field

–The function of svae dev is to write the module installed just now package.json In the middle.

Front end environment installation

You may feel a little strange. Didn’t you just install gulp? Yes, it is a global installation, so that gulp tasks can be run at the end. Here is the project level installation. The real gulp module is installed to the node of the project_ Modules / next, the following plug-ins all rely on the gulp module.

Local installation of gulp plug-in

Next, install the three plug-ins mentioned above and input them in the terminal
npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
The installation is completed, as shown in the figure below

Front end environment installation

  1. establish gulpfile.js file

Create in the project root directory gulpfile.js File, and then write the following code, these codes have nothing to explain, specific referenceGulp API

/*Introduce gulp and related plug-ins require ('node ')_ Corresponding module in modules')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//Compression
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//
gulp.task('script', function () {
    gulp.src(['src/a.js',"src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
gulp.task('default',['minify-css','script']);

The actual project is certainly not so simple. If you think about it, it is impossible for us to operate on a few files. We should operate on a batch of files, which involves the problem of file matching. We will not start it for the time being.

  1. Run gulp

As you can see, we’re here gulpfile.js There are three tasks created, two in fact, and the last one is to merge the above two tasks.
Then we can run the above tasks on the terminal and input them on the terminal

gulp minify-css

The running result is as follows: our compressed CSS file is generated in dist / CSS / directory.
Front end environment installation

  1. Running with webstrom

Up to now, we basically know the application of gulp in the project. There is no problem with less basic process. However, it is not convenient to use the terminal all the time. Let’s run the above gulp task directly in webstrom.
Open in webstrom gulpfile.js Right click Show gulp tasks, which is listed on the gulp panel gulpfile.js Select the task to run.
Is it very convenient!

Front end environment installation

Summary

It seems that there are many steps, but in fact there are only a few. We started from zero, mainly to demonstrate the whole process and understand the principle. For ordinary users, nodejs NPM should have been installed long ago.
In fact, we need to do the following:

  1. establish package.json For the NPM init method we used above, in actual operation, we usually create the package.json Take it directly, put it in the root directory of the project, and then NPM install it, so that the gulp plug-in we need to use is automatically installed.
  2. to write gulpfile.js , gulp are just some APIs, and the plug-ins we often use are probably those, so we can write one gulpfile.js And then modify it on this basis.