Node environment configuration and gulp tools

1.GitLab Online Use

• Two ways to sign in

  • Login via HTTP, user name and password required

  • SSH login, no user name and password need only RSA key, RSA by entering ssh-keygen-t RSA in Git bash generation, generate a good key through the generated path to find the corresponding id_ Rsa.pub file, add its contents to the Gitlab and save the SSH key, no user name and password will be required for subsequent push or pull operations.

• Clone Warehouse

  • git clone your address (here you can get your online repository via HTTPS address or SSH)

• get Warehouse contents

  • git pull address/origin master can get warehouse data through an HTTPS address, but it's too cumbersome to use Origin equivalent to replacing the previous address usage.

    • In fact, this use contains two operations span>

    • Git fetch origin (get remote branch)

    li>

    git merge origin/master (merge remote branch)

  /ul>

• remote branch management

  • Create remote branch

    • 1. After you have created the branch locally, you can push the branch locally

    • 2. After creating a branch on a Web page, get the branch by using git fetch

  • Delete Remote branch

  • git push Origin--delete the branch that needs to be deleted, then others need git fetch-p

If they need to update the branch

• git supplemental knowledge

  • Save the current Job site

    • Using git stash to save your current work site, you can switch to another branch to work, or do other urgent work on the current branch, such as revising a bug test submission.

      • 1 after submitting the code to the cache via git add, enter git stash to save the site, and then complete the work by creating another branch or jumping to another branch

      • 2 after resolving the corresponding work, jump to the previous work branch in the restore site via git stash pop

  • View hidden branches git branch-a

2.Node

• What is node

  • node. JS is a JAVASCRIPT runtime environment based on the Chrome V8 engine

• Website

• node. JS (Is it a jquery-like JS file)

• Chrome browser JS engine (V8 engine)

• JavaScript composition

  • ECMAScript Basic Syntax

  • Dom

  • Bom

• node only resolves es, such as Aler () can not be used

  • plus Google V8 the parsing speed of JS is greatly improved

  • provides a number of system-level APIs, such as operations on files

  • is actually a JS run environment

• install node

  • do not install in Chinese path

  • NVM Node version manager

  • NRM Node Registry Manager (Path Management)

  • NPM Node Package Manager (dependent package management) www.npmjs.com npm

• Common NVM commands

  • NVM ls view node download version

  • NVM install 4.6.0 download version named 4.6.0

  • NVM use 4.6.0 switch 4.6.0 version

• Common NRM Commands

  • NRM ls view different download source addresses

  • NRM use CNPM switch to CNPM download source

• Common NPM Commands

  • NPM init Initializes a Package.json file, and if you add-y, you don't need to hit enter.

  • NPM install-g Bower Global Installation Bower

  • NPM Install jquery--save-dev locally installs jquery and logs it to Package.json

  • NPM Uninstall Package Name Delete Package If it is a global installation, add-G

3.Bower

• What is Bower

  • Bower is a front-end management tool that is used primarily to manage front-end packages such as Jquery, BootStrap, angular, and so on.

  • Some people have questions about why NPM is also a management tool. I also want to learn bower management tools?

    • The reason is very simple, because it is like thunder download why you have to use QQ whirlwind, electric donkey, express download, in fact, the reason is the same because NPM in some cases can not meet the needs of users then the market will appear alternative products.

  • Bower website

    • Website

    • Chinese web

  • How to use Bower for management

    • Installing BOWER:NPM Install-g Bower

    • Create Package Bower.json:bower Init

    • Install various package files: Bower Install < Package>, such as download Jquery:bower install jquery, bower install jquery#1.8.0 select Download 1.8.0 version

    • Uninstall package file: Bower Uninstall < package>

    • Package Search: Bower search <package>

    • Package version: Bower info <package>

    • Modify the Bower installation location: Create the. BOWERRC under the project root and add the following ' {

           "Directory": "Vendor"//Here is the specified package installation path, and then remember to delete this comment

      }`

4.Gulp

• What is Gulp

  • Enhance your workflow with automated build tools!

• What is automated building

  • When a project is large enough, we will take the function of the different people to develop, further functions will be divided into different modules for development, which will result in a complete project is actually composed of a lot of "code sections", we will use less in the development, Sass, such as some pre-processing procedures, need to parse the preprocessor, in order to reduce the need to merge CSS, JavaScript, in order to speed up the request requires HTML, CSS, JavaScript, images compression It is almost impossible to accomplish this series of tasks entirely by hand, and it needs to be done with the help of a build tool. The so-called build tool is a software tool that can help us to merge, compress, verify, preprocess and so on with simple configuration.

• Different build tools

  • Common build tools include: Grunt, Gulp, F.i.s (Baidu)

• Advantages of Gulp

  • Easy to use with code over configured policies, Gulp makes simple tasks simple and complex tasks manageable.

  • Build quickly with the power of the node. JS Stream, you can quickly build projects and reduce frequent IO operations.

  • Plug-in high quality Gulp Strict plug-in guide to ensure that the plug-in as you expect the concise high quality work.

  • Easy to learn with minimal API, mastering Gulp effortlessly, build your work in control: Like a series of streaming pipelines.

• Getting Started Guide

  • 1. Global Installation Gulp:$ npm install --global gulp-cli

  • 1. As a development dependent (devdependencies) installation of the project:$ npm install --save-dev gulp

  • 1. Create a file named Gulpfile.js under the project root directory: ' var gulp = require (' gulp '); gulp.task (' Default ', function () { //Put your default task code on this });

  • 1. Run Gulp:$ gulp

• Gulp Sample Code gulp.task (' Image ', function () {return gulp.src ('./images/* ', {base: './'})

  . Pipe (Imagemin ()). Pipe (Gulp.dest ('./dist '));

  }); ·

• Gulp Plugin Library:

  [Official Address] (http://gulpjs.com/plugins/) [NPM can also find Gulp plugins] (https://www.npmjs.com/)

• Common plug-ins gulp-autoprefixer (CSS plus prefix) https://www.npmjs.com/ Package/autoprefixer ' // By require reference Gulp var gulp = require (' gulp '); var autuprefixer=require (' Gulp-autoprefixer '); //Add CSS prefix Gulp.task (' Cssautuprefixer ', function () { //get to the desired CSS file via src //* means all matches //pipe Pipeline plays an important role //dest output gulp.src ('./css/*.css ')

    . Pipe (Autuprefixer ())  . Pipe (Gulp.dest ('./dist/css '));

  }); `

Gulp-uglify (minimized js file)https://www.npmjs.com/package/gulp-uglify '//Minimized JSgulp.task (' uglify ' , function () { gulp.src ('./js/*.js ', {base: './'})

   . Pipe (Uglify ())   . Pipe (Gulp.dest ('./dist '))

}); 'gulp-htmlmin (compressed HTML file)https://www.npmjs.com/package/gulp-minify-html'//Compress HTML page Gulp.task (' Htmlmin ', function () {

Gulp.src ('./*.html ', {base: './'}). Pipe (Htmlmin ({    collapsewhitespace:true,    removecomments:true,    Minifyjs:true,})). Pipe (Gulp.dest ('./dist '));

}); 'gulp-imagemin (minimized image)https://www.npmjs.com/package/gulp-imagemin'//Compress picture gulp.task ( ' Imagemin ', function () {

GULP.SRC (['./images/*.jpg ', './images/*.png '], {base: './'}). Pipe (    imagemin ())    . Pipe (Gulp.dest ('./dist ') ))

});

?

Node environment configuration and gulp tools