This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Build a front-end engineering environment

Suppose, we are the rich second generation, we have money and no place to spend, ready to build a mansion. The next official start:

1. Site the project

The project can be built wherever it wants. Freedom, right

2. Project “filing”

You need to create a package.json file in the project directory to describe the current project information. You need to execute NPM init in the project directory and enter the project configuration information to generate a package.json

3. “Contractor’s Entry”

Install gulp in the global environment:


  npm install gulp -g

Copy the code

After installing globally, you also need to install locally (within the project directory)

  npm install gulp
Copy the code

When you install a package, you will find a node_modules folder in the project, and the package will be stored in this folder. Packages have dependencies. When you install a package, maybe a also depends on B, C, and so on. There are many other packages in node_modules as well

Note that there are two configurations in package.json:

  • dependencies(Production dependence)
  • devDependencies(Development dependency)

For example, a package like jquery that is packaged into a project is a production dependency. For example, a package like Gulp that is not packaged into a project is a development dependency. For example, a package like Jquery that is packaged into a project is a production dependency. When installing packages, you need to record the packages used in package.json

When installing the package

  • Followed by--save / -SThat means the package is a production dependency,
  • Followed by--save-dev / -DIndicates that the package is a development dependency,
  • This is recorded in package.json

When we migrate a project, we usually don’t migrate node_modules, we just need to run NPM install in the project to download all the packages recorded in package.json

4. Create a mission statement

By creating the gulpfile.js file in the project, we can create many tasks in this file and let gulp execute them

5. BuildsrcThe development catalog, that’s itdistThe directory is the output directory

Update the trailer below, keep up with the rhythm

Next, I will continue to learn Node.js to build our automated development environment, keep up with the pace of progress, come on,

Improve development efficiency and empower our development efficiency!

Come on!! go~