最全的web前端命令！

bable 安裝:

(1):npm install –g babel-cli

(2):npm install -g cnpm --registry=https://registry.npm.taobao.org [國內域]

(3):npm install --save-dev babel-preset-es2015

(4):type nul>.babelrc [建立] 文件中寫入{"presets":['es2015']}

(5):babel js/es6.js -o js/es5.js 轉換

(6):babel js/es6.js -o js/es5.js -w [隨時更新]

gulp 安裝:

(1): npm install gulp -g [全局安裝]

(2): npm install gulp --save-dev [安裝依賴]

(3): npm install gulp-sass --save-dev [sass插件]

(4): npm install gulp-connect --save-dev [插件搭建本地服務]

(5): npm install gulp-concat --save-dev [合併插件]

(6): npm install gulp-uglify --save-dev [合併js文件進行壓縮]

(7): npm install gulp-rename --save-dev [保留先後壓縮兩個文件]

(8): [npm install gulp-sass --save-dev] npm install gulp-clean-css --save-dev [壓縮css]

(9): npm install gulp-imagemin --save-dev [對圖片進行壓縮]

(10):npm install gulp-sourcemaps --save-dev

(11):npm install babel-cli --save-dev

npm install babel-preset-es2015 --save-dev

npm install gulp-babel --save-dev [es6轉換es5]

定義:

const gulp = require('gulp');

const sass = require('gulp-sass');

const connect = require('gulp-connect');

const concat = require('gulp-concat');

const uglify = require('gulp-uglify');

const rename = require('gulp-rename');

const cleanCss = require('gulp-clean-css');

const imagemin = require('gulp-imagemin');

const babel = require('gulp-babel');

gulp.task("server",function(){

connect.server({

root:"dist",

livereload:true

})

});

git 分支語句命令:

$ ssh-keygen -t rsa -C "youremail@example.com" [建立密鑰]

$ git config --global user.name "Your Name"

$ git config --global user.email "email@example.com" [git 是分佈式管理系統 因此須要輸入名字和email]

$ mkdir learngit [建立項目]

$ cd learngit [文件指向]

$ pwd [顯示當前目錄]

$ git init [把目錄變成能夠管理的倉庫]

若是使用Windows系統，爲了不遇到各類莫名其妙的問題，請確保目錄名（包括父目錄）不包含中文

$ git add xx [把文件添加到倉庫]

$ git commit -m "xx" [把文件提交到倉庫]

$ git reset --hard HEAD [回退(上一個版本就是HEAD^，上上一個版本就是HEAD^^)]

$ git reset --hard commit id []

$ git reflog [記錄了你的每一次命令]

$ git checkout -- xx [讓文件回到你最後提交的狀態]

$ git reset heard HEAD xx [把暫存區的修改撤銷掉]

$ git rm xx [刪除]

$ git status [倉庫的當前狀態]

$ git diff xx [查看改動 (只能在未提交以前使用)]

$ git log [顯示從最近到最遠的提交 (提交歷史)] 若是眼花繚亂，能夠試試加上--pretty=oneline參數

git branch [查看分支]

git branch [建立分支]

git checkout [切換分支]

git checkout -b [建立+切換分支]

git merge [合併某分支到當前分支]

git branch -d [刪除分支]

git log --graph [查看分支合併圖]

git stash [能夠把當前工做現場管理起來]

git stash pop [恢復工做現場]

手機適配

第一種

(function(doc, win){

var docE1 = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function(){

var clientWidth = docE1.clientWidth;

if(!clientWidth) return;

docE1.style.fontSize = 10 * (clientWidth / 108) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt,recalc,false);

doc.addEventListener('DOMContentLoaded',recalc,false);

})(document,window);

第二種:

寫移動端必須加

var bw = (document.documentElement.clientWidth/6.4)+"px";

var htmlTag = document.getElementsByTagName("html")[0];

htmlTag.style.fontSize=bw;

///////////////////////////////////////////////////////////////////////////////////////////////////

ajax:建立交互式網頁應用的網頁開發的技術 [特色:局部刷新]

封裝: function ajax(url){

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")

xhr.open("get",url,true);

xhr.send();

xhr.onreadysattechange = () =>{

if(xhr.readystate == 4){

if(xhr.status == 200){

var data = xhr.responseTEXT;

return data;

}

}

}

}

promise異步編程的解決方案:解決回調嵌套的問題

function foo(INTERVAL){

return new Promise(function(resolve,reject){

setTimeout(resolve,INTERVAL);

})

}

webpack 優勢:

1:模塊化:讓咱們把複雜的程序細化爲小的文件

命令:

(1):npm install -g webpack [全局安裝]

npm install webpack-cli -g

npm install -g webpack-dev-server

(2):npm install --save-dev webpack

(3):npm init [建立package.json文件]標準的npm說明文件，

裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等

(4):npm install --save-dev webpack [安裝到項目目錄下]

(5):npm install webpack-cli --save-dev

(6):npm install --save-dev webpack-dev-server [構建本地服務器]

配置: [文件從哪輸入] [文件從哪輸出]

module.exports = {

entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件

output: {

path: __dirname + "/public",//打包後的文件存放的地方

filename: "bundle.js"//打包後輸出文件的文件名

}

}

/////////////////////////////////////////////////////////////////////////////////////

node.js:

[搭建服務器];

const http = require("http");

http.createServer((req,res)=>{

res.writeHeader(200,{"content-type":"text/html;charset=utf-8"});

res.write("aaa");

res.end();

}).listen(8000);

執行此條命令 服務器不會自動刷新 須要本身去 手動運行node

安裝  npm install supervisor -g

啓動 supervisor xxxx.js

能夠不用執行node，自動更新（supervisor）

/////////////////////////////////////////////////////////////////////////////////////////////

Mongodb

npm install mongodb@2.2.33 --save-dev

npm list mongodb --save-dev

var MongoClient = require("mongodb").MongoClient;

var url = "mongodb://localhost:27017/mydb";

MongoClient.connect(url,function(err,db){};

express

npm init [初始化項目]

1/全局安裝環境 npm install express –g

2/測試安裝成功與否 express –h

3/安裝npm install express-generator –g

4/腳手架建立項目 express -e project_name（項目名字）

5/安裝package.json中的依賴，進入目錄cd express，安裝依賴npm install

6/啓動npm start 瀏覽器輸入localhost:3000 查看

npm install express-session --save-dev [暫時存儲可在其餘頁面請求到]

npm install async --save-dev [異步編程] 串行無關聯:async.series([],()=>{}) 並行無關聯:同上

npm install body-parser --save-dev [req.body]

ejs的特色:

(1)快速編譯和渲染

(2)簡單的模板標籤

(3)自定義標記分隔符

(4) 支持文本包含

(5)支持瀏覽器端和服務器端

(6) 模板靜態緩存

(7)支持express視圖系統

ejs經常使用標籤:

(1)<% %>流程控制標籤

(2)<%= %>輸出內容標籤（原文輸出HTML標籤）

(3)<%- %>輸出標籤（HTML會被瀏覽器解析）

(4)<%# %>註釋標籤 % 對標記進行轉義

(5)<%- include(path) %> 引入 path 表明你引入其餘模板的路徑 e.g:<%- include("xxx.ejs")%>

mocha 測試

全局安裝: npm install mocha -g

須要測試建立測試文件夾:

引入:chai模塊:

var chai = require("chai");

var expect = chai.expect;

describe("測試性質",function(){

it("測試條件",function(){expect(函數).to.be.equal()})

})

<--項目須要多餘安裝的插件 及各類

var express = require('express');

var router = express.Router();

var qs = require("querystring");

var ObjectId=require('mongodb').ObjectId;

var async = require("async");

var mongoClient = require("mongodb").MongoClient;

var url = "mongodb://localhost:27017/mydb";-->

vue 使用命令行建立項目:

1:npm install vue-cli -g

2:npm install webpack -g

3:vue init webpack myapp[項目名稱]

4:cd myapp

5:npm install [安裝依賴]

6:npm run dev 啓動

7：npm run build 打包

一、插件安裝 axios

npm install axios —-save-dev

使用 哪一個文件須要使用，就在該文件的js中 導入

import axios from ‘axios’

二、路由 vuerouter （tips：路由規則配置均在main.js中）

依賴安裝 nam install vue-router —-save-dev

使用 在main.js引入 import VueRouter from ‘vue-router’

聲明使用 在main.js 中 Vue.use(VueRouter)

//juqery

npm install jquery --save-dev

這裏推薦一下個人前端學習交流羣：784783012，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習知識。本身整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各類框架的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。

點擊：加入