前端常用命令总结

前端常用命令总结

bable

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

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

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 <name>  [创建分支]
  git checkout <name>  [切换分支]
  git checkout -b <name> [创建+切换分支]
  git merge <name>   [合并某分支到当前分支]
  git branch -d <name>  [删除分支]
  git log --graph      [查看分支合并图]
  git stash        [可以把当前工作现场管理起来]
  git stash pop    [恢复工作现场]

webpack

命令:
npm install -g webpack   [全局安装]
npm install --save-dev webpack
npm init                  [创建package.json文件]标准的npm说明文件，
里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等
npm install --save-dev webpack       [安装到项目目录下]
npm install webpack-cli --save-dev
npm install --save-dev webpack-dev-server   [构建本地服务器]
配置:   [文件从哪输入]   [文件从哪输出]
module.exports = {

    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

    output: {

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

    filename: "bundle.js"//打包后输出文件的文件名

    }
     }