This is the sixth day of my participation in the August Text Challenge.More challenges in August

1. The third-party module Gulp

Front-end construction tool based on node platform development

Write mechanized operations as tasks, and when you want to perform mechanized operations, execute a command line command and the task is automatically executed

1.1 What can Gulp do

  • Project on-line, HTML, CSS, JS file compression
  • Syntax conversion (ES6, LESS, SCSS)
  • Public files are removed
  • Modify the file browser automatically refreshes

1.2. Methods provided in Gulp

  • Gulp.src (): Gets the file to be processed by the task
  • Gulp.dest () : Output file
  • Gulp.task (): Creates a gulp task
  • Gulp.watch (): Monitors file changes
Gulp.task ('first',()=>{// Get the file gulp.src('./ SRC/CSS /base.css') Pipe (gulp.dest('./dist/ CSS '))})Copy the code

1.3 Gulp plug-in

  • Gulp-htmlmin: HTML file compression
  • Gulp-csso: compresses the CSS
  • Gulp-babel: JavaScript syntax conversion
  • Gulp-less: syntax transformation of less
  • Gulp-uglify: Compression obfuscates JavaScript
  • Gulp-file-include: includes public files
  • Browsersync: Real-time browser synchronization

Gulp-htmlmin (will only compress HTML code, not CSS code)

Using the step

1. Download 2. Reference 3

1.4 Construction Task

/ / copy folders gulp. Task (' copy '() = > {gulp. SRC ('. / SRC/images / *'). The pipe (gulp. Dest (dist/images)); Gulp. SRC ('. '/ SRC/lib / *), pipe (gulp. Dest (' dist/lib)}) / / build tasks gulp. Task (' default' [' htmlmin ', 'cssmin', 'copy']); // You can perform multiple tasks at onceCopy the code

2. Package. The json file

2.1 Node_modules folder problems

  1. Too many folders and files are too fragmented, and when we copy the whole project to others, the transmission speed will be very slow
  2. Copied module dependencies need to be recorded to ensure that the version of the module is the same as the current version, otherwise the current project will run an error

2.2 Functions of package.json Files

Project description file, which records the current project information, such as project name, version, author, Github address, which third party modules the current project relies on, etc.

Run the NPM init -y command

The first solution

Json file contains the names and versions of the modules that you downloaded. NPM install is used to download all the modules that you need

2.3 Project Dependency

  • In the development stage and online operation stage of a project, it needs to rely on the third-party package, called project dependency
  • Json files downloaded using the NPM install package name command are added to the Dependencies field of multiple package.json files by default
{"dependencies":{"jquery":"^3.3.1"}}Copy the code

2.4 Development Dependencies

  • Development dependencies are third-party packages that need to be relied on during the development phase of a project but do not need to be relied on during the online operation phase
  • Use the NPM install package name –save-dev command to add the package to the devDependencies field of the package.json file

Use the –save-dev command to distinguish development dependencies from project dependencies

2.5 Downloads of project dependencies and development dependencies

When you use NPM Install, this is all the packages you download

When you use NPM install — Production, you download project dependencies

2.6 Function of package-lock.json file

When downloading a third-party module, NPM generates another package-lock.json file

  • Lock the version of the package to ensure that the next download will not cause problems due to a different package version
  • Speed up the download, because the tree structure of the third-party packages the project depends on and the download address of the packages are already recorded in this file, and reinstallation requires no additional work to be downloaded

3. Module loading mechanism in Node.js

3.1 Module Lookup Rule – when a module has a path but no suffix

require('./find.js')

require('./find')

  1. The require method looks for a module based on its path, or if it’s a full path, imports the module directly
  2. If the suffix of the module is omitted, look for the js file with the same name first and then the JS folder with the same name
  3. If you find a folder with the same name, look for index.js in the folder
  4. If there is no index.js in the folder, it will look for the entry file for the main option in the package.js file in the current folder
  5. If the specified entry file does not exist or no entry file is specified, an error is reported and the module was not found

3.2 Module Lookup Rules – When a module has no path and no suffix

require('find')

  1. Node.js assumes it is a system module
  2. Node.js goes to the node_modules folder
  3. First, see if there is a JS file with that name
  4. See if there is a folder with that name
  5. If it is a folder, see if there is index.js in it
  6. If there is no index.js look at the main option in package.json in that folder to determine the module entry file
  7. Otherwise, no error can be found