NVM_HOME=C:\Develop\nvm NVM_SYMLINK=C:\Develop\nodejs NPM_HOME=C:\Develop\nvm\npm

install packageName
// -save // -yes parameter to default configuration

npm init

Front-end automation workflow environment

Original link: https://blog.csdn.net/zxiang248 /article/details/52472237

NVM_HOME=C:\Develop\nvm NVM_SYMLINK=C:\Develop\nodejs NPM_HOME=C:\Develop\nvm\npm

install packageName
// -save // -yes parameter to default configuration

npm init

Learning Objectives

• Understand what is Node and what is NPM
• Master The use of Bower
• Skillful use of Less/Sass
• Build your own automated workflow
  
  • Automatic compilation
  • Automatic merging< /li>
  • Auto refresh
  • Auto deployment (combining and compressing files)
• GIT and GitHUB
  
  • master hosting source files
  • gh-pages hosting deployment files
  • Build your own blog on git

Why automate the process

• There is a lot of repetitive work in the development process
• Don’t repeat yourself

1. Node environment

1.1. What is Node

• Not a JS file, nor is it a JS Framework
• It’s Server side Javascript runtime, a JS runtime on the server side
• We can execute JS code directly in Node (with JS engine inside, Chrome v8 engine)

li>

• alert(); ECMAScript JS-ES BOM DOM
• Only ECMAScript can be run in node, DOM and BOM cannot be used
• Currently our JS is running in the browser Kernel
• What is PHP? Script language runtime environment
• Nodejs has two branches
  
  • Node.js
  • IO.js open source community
  • Zhehe
  • nvm (Node version management tool)
  • Because there are many versions of Node, developers may rely on many versions
  • Through NVM, you can easily switch between different versions. Between versions

NVM_HOME=C:\Develop\nvm NVM_SYMLINK=C:\Develop\nodejs NPM_HOME=C:\Develop\nvm\npm

• 1
• 2
• 3

1.2.Node environment configuration

1.2.3 environment variables

• Environment variables are the systems provided by the operating system Level is used to store variables.
• System variables and environment variables
• System variables: Variables shared by all current users (usually only one user on your own computer), it is recommended to configure your own Environment variables are placed in user variables so that user variables are relatively clean.
• path variable (not case sensitive)
• path is equivalent to a path reference

• As long as it is added to the value of the path variable, it can be Search in any directory

• Command line command (used to execute files in the current directory)
  cd: change directory

  1.3Node purpose

  REPL environment (console environment)

  1.3.1 development web Application

  • Make a dynamic website
  • Develop a server-side API that provides data

  1.3 .2 Basics of front-end development tools

  • NodeJS has brought an industrial revolution to the front-end and the entire development industry
  • End slash and burn

1.4Node development web application demo

• All functions of the node.js light core must be provided in a feature pack

< li>Node officially provides some of the most basic packages

1.4.1 Review request and response

The client sends to the service End: request message
server sent to client: response message

1.5.NPM

1.5 .1 What is NPM

• Node Package Manager
• Node application dependency package management tool
• Installation, uninstallation, and update operations

1.5.2 Why use NPM

• There are many packages
• Scenario: I need A, and A depends on B ,B depends on C
• Common package management tools have circular dependencies
• You only need to remember what you want

1.5.3 Common NPM Operation

//Install a package and install the latest stable version by default

install packageName
// -save // -yes parameter to default configuration

• 1
• 2
• 3

//Initialize operation, add a configuration file to the project

npm init

• 1

Add a configuration file to the project

2.Bower

2.1 What It’s Bower

• [Official Website] (http://bower.io)
• Web application dependency management tool

2.2 Why Bower

• Manage Packages in a Convenient and Convenient Way

2.3 Bower Practice

• npm install -g bower // -g:global
• To modify the global path of npm is to add the text of .npmrc in the user directory
• npm config list //Print the list of npm configuration
  
  

  ---

gulp

Current Front-end development

• It is no longer a simple web application built using simple technologies such as html+css+javascript
• If we want to improve efficiency, we must Reduce repetitive work
• Use less pre-processed css coffeescript
• Provide convenience in the development phase, and the development phase is faster
• The current development industry is high-quality Developers will not focus on repetitive work
• -Gulp is a way to automate a lot of repetitive work in our development process
  
  • Preprocessing language compilation
  • js css html compression and confusion
  • Picture Volume optimization,
• In addition to gulp, there are some similar automation tools Grunt
• what how why

Gulp introduction

• Currently the most popular automation tool
  
  • What is an automated build tool?
  • Automatically complete a series of repeated operations
  • less->css
  • coffeescript
  • css compression
  • js Compression
  • html compression
  • img size optimization
  • . . . . . .
• Link:
  
  • [Official Website](http://gulpjs.com/)
  • Chinese Website

  li>

• It is used to mechanically complete repetitive tasks
• Gulp’s mechanism is to abstract repetitive tasks into individual tasks

ul>