最全的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前端的，或是转行，或是大学生，还有工做中想提高本身能力的，正在学习的小伙伴欢迎加入学习。

点击：加入