代码管理工具 （含git、npm、gulp）

wyyy721

1 Git 分布式代码管理工具（基于Linux，可在本地进行提交）代码同时储存在本地和服务器中
①Git基本操作命令
　　（1）初始化，创建初始化仓库
　　git init ------- 文件初始化，初始一个仓库，一般在根文件夹执行，创建一个.git的隐藏文件夹
　　ls ------- 查看根文件中的文件
　　ls -a-------查看根文件中的文件的路径
　　（2）配置信息，创建个人信息
　　git config ------- 开启文件配置
　　git config ------- 开启文件配置，
　　git config --global user.name “tabb”------- 配置文件名，--global表示是全局变量，不设置这参数，表示配置的内容只在这个文件夹下生效
　　git config user.email “tabb@sina.com”------- 配置文件名对应邮箱
　　git config–list ------- 查看配置信息列表
　　（3）代码提交
　　初始化的.git文件夹，包含暂存区、仓库两部分
　　git add ./reademe.md ------- 将该路径的文件提交到暂存区
　　git add. ------- 将该路径的所有文件提交到暂存区，.等同于./
　　git commit -m “注释内容” ------- 将暂存区中的文件提交到仓库中，-m表示指定一个字符串，作为提交的注释说明，这样代码就提交到仓库中进行了备份
　　git pull https://github.com/TabbCoding/chinese-chess.git ------下载代码
　　git push https://github.com/TabbCoding/chinese-chess.git master------- 向github服务器提交代码，添加-u参数，可实现master关联
　　gitremote add originhttps://github.com/TabbCoding/chinese-chess.git------- 创建变量origin 存储这个地址，后续push不需输入地址，输入变量即可
　　在push提交代码之前，最好先把原来的代码pull下来，看看有没有改变过，如果有改变可以在本地修改后再提交，否则直接提交的话如果服务器代码改变，会发生冲突报错
　　合并提交代码，将add和commit两步骤分合并成一个步骤，只对修改后的文件有用，对新添加的文件无效
　　git commit -a -m “注释内容” ------- 合并add与commit两步骤提交，-a表示把所有修改后的文件提交到暂存区
　　（4）查看工作区状态
　　git status------- 查看工作区内容
　　出现红色，表明有文件或修改过的文件，没有提交到暂存区，出现绿色表明，有文件或修改过的文在暂存区，没有提交到仓库中
　　（5）忽略不想提交的文件

先在当前目录下创建.gitignore文件，没有后缀名

在.gitignore文件内，写下/test.txt，即需要忽略的文件名，再在git status中查看时，即使该文件没有提交也不会报出红色提示，写/.gitignore，即可忽略.gitignore文件本身

写下/css/*.css 表示忽略css目录下的所有.css后缀的文件，*是通配符

　　（6）比较文件差异
　　git diff------- 比较工作区文件与暂存区文件差异，如果暂存区没有文件，就会将工作区代码与最近一次提交进行对比
　　git diff --cached------- --cached 参数表示缓存，加上这个参数表示，将暂存区文件与最近一次提交的文件进行对比
　　git diff0e2345…(注释：这是commit版本号) 1f4567…(注释：这是commit版本号) ./reademe.md(注释：这是需要比较的文件路径)------- 比较两次提交的文件，commit版本号在git log中查询，可使用git log --oneline使提交信息在一行中显示，此时commit版本号会简写为7为数字，也可使用该7为数字进行比较
　　（7）查看git执行日志
　　git log------- 查看执行提交commit的内容，会给commit一个唯一的hashCode值，相当于这次提交操作的id（版本号），可追踪提交操作
　　git log --oneline------- 在一行中显示执行提交commit的内容，--oneline参数表示，在一行中显示
　　git reflog------- 查看所有的操作，可以看到所有的版本号
　　（8）版本回退
　　git reset --hard Head~1------- 使文件回到上上次提交的状态，Head~0表示回到上一次提交的状态
　　git reset --hard 0e23456…(注释：这是commit版本号)------- 使文件回到指定版本号的状态
　　（9）分支操作（主分支名是master）：将内容提交到分支中，不影响主分支、其他分支提交
　　如果在分支中和主分支中同时修改了代码，在合并时会发生冲突，在代码中也会显现，手动修改即可
　　git branch name ------- 创建一个分支，name是给分支起的名字
　　git branch------- 查看当前分支名，
　　git checkout name ------- 切换操作到name名字分支下
　　git merge name ------- 合并名字name的分支到主分支之中
　　git branch –d name ------- 删除名字name的分支，-d参数表示删除
　　（10）删除仓库中的文件
　　git rm –cached “./reademe.md” ------- 不删除物理文件，仅将该文件从缓存中删除
　　git rm –f “./reademe.md” ------- 不仅将该文件从缓存中删除，还会将物理文件删除（不回收垃圾站）
　　（11）查看文件
　　git ls-files------- 查看当前文件名
　　（12）在github上搭建博客
　　新建一个项目，只需要把index.html文件上传到gh-pages分支上就可以了，打开

[github用户名].Github.io/[上传index.html文件的仓库名]/index.html会自动打开index.html文件，相当于是个网页

　　（13）ssh方式上传代码（公钥-私钥）
　　（14）图形化git工具TortoiseGit
2 npm(node package manger) 引入库、插件的管理工具
（1）npm初始化：安装nodejs自带安装npm
　　使用cmd，切换到需要使用npm的文件的路径，输入npm init
　　例如：D:\ data\MyGit\npm-demo>npm init
　　会生成一个package.json的文件，里面包含下载安装的插件的版本信息
　　在初始化时会要求设置name，基本信息，可以通过加上 -y 指令：表示接受默认设置，这样可以避免每次初始化都设置，完整指令：npm init -y
（2）npm安装jquery（初始化文件夹不能命名为jQuery，否则安装不上）
　　在初始化的文件夹路径下输入npm install jquery --save
　　npm会在这个文件夹中生成node_modules文件夹，里面包含jquery
　　需要查看jquery的版本，点开package.json即可
（3）npm安装指定版本jquery
　　在需要安装的文件夹路径下输入npm install jquery@3.0.0 --save即可
（4）移除jquery
　　在需要移除的文件夹路径下输入npm remove jquery –save
　　或者npm uninstall jquery –save
（5）使不同的文件夹安装相同的node_modules库文件夹
　　把已经生成的package.json文件拷贝的需要安装node_modules库文件夹的文件夹下，再在该文件夹路径下执行npm install --production，该文件夹就有相同的node_modules库文件夹了
（6）browser-sync自动刷新浏览器插件（工具一般-g全局安装）
　　全局安装的包，默认放在：C:\Users\user\AppData\Roaming\npm\node_modules文件夹下
　　安装命令：npm install browser-sync -g  全局安装
　　使用命令：browser-sync start --server --files“./index.html , ./css/*.css”
　　最后””内输入需要刷新监听的文件的路径
（7）gulp自动化构建工具（代码合并、压缩）
　　安装命令：npm install gulp-cli -g  全局安装
　　在需要安装gulp的项目文件夹，先npm init初始化npm
　　然后非全局安装gulp：npm install gulp --save-dev
　　非全局安装gulp-uglify插件（代码压缩，混淆插件）：
　　npm install gulp-uglify --save-dev
　　非全局安装gulp-concat插件（代码合并插件）：
　　npm install gulp-concat --save-dev
　　非全局安装gulp-cssnano插件（css压缩插件）：
　　npm install gulp-cssnano --save-dev
　　非全局安装gulp-htmlmin插件（html压缩插件）：
　　npm install gulp-htmlmin --save-dev
　　在gulpfile.js文件中声明gulp
　　获取gulp对象
　　var gulp = require('gulp');
　　引入gulp-uglify插件
　　var uglify = require('gulp-uglify');
　　引入gulp-concat插件
　　var concat = require('gulp-concat');
　　a) .新建对js处理的任务
　　gulp.task('script', function() {  在函数中写需要做的事情
　　src匹配到创建的文件，如果是多个文件需要写在数组中
　　gulp.src( ['./test1.js' , ’./test2.js’] )
　　.pipe(concat(‘all.js’))  将上述两个文件合并到一个文件all.js中
　　.pipe(uglify())  执行uglify压缩，混淆
　　.pipe(gulp.dest('./dist'));   pipe输出到指定的目录dist
　　})
　　b) .新建对css处理的任务
　　引入gulp-cssnano插件
　　var cssnano = require('gulp-cssnano');
　　gulp.task('style', function() {  在函数中写需要做的事情
　　src匹配到创建的文件，如果是多个文件需要写在数组中
　　gulp.src( ['./test1.css' , ’./test2.css’] )
　　.pipe(concat(‘all.css’)) 将上述两个文件合并到一个文件all.css中
　　.pipe(cssnano())  对css文件进行压缩
　　.pipe(gulp.dest('./dist'));   pipe输出到指定的目录dist
　　})
　　c) .新建对html处理的任务
　　引入gulp-htmlmin插件
　　var htmlmin = require('gulp-htmlmin');
　　gulp.task('html', function() {  在函数中写需要做的事情
　　src匹配到创建的文件
　　gulp.src('./index.html’)
　　对html文件进行压缩，并合并空白符
　　.pipe(htmlmin({collapseWhitespace:true}))
　　.pipe(gulp.dest('./dist'));   pipe输出到指定的目录dist
　　})
　　d) .监视文件变化，并调用指定任务处理代码：实现可以动态压缩代码，只要书写的代码发生变化，压缩的代码也动态改变，第一个参数是监视的文件名，第二个参数是想要执行的任务
　　gulp.task('watch', function() {
　　gulp.watch( [ ‘./test1.js’ , ‘./test2.js’ ] , [‘script’] )
　　})
　　再在该gulpfile.js路径下的cmd命令窗口输入：gulp watch，即可实现
　　e) .在gulp下使用browser-sync
　　非全局安装browser-sync插件：
　　npm install browser-sync --save-dev
　　引入browser-sync插件
　　var browserSync = require('browser-sync');
　　gulp.task('watch', function() {
　　browserSync.init({    初始化
　　server: ’./dist’,     指定网站的根目录
　　files: [‘./dist/index.html’]
　　})
　　gulp.watch( [ ‘./index.html’ ] , [‘html’] )
　　})
（8）npm安装补充
　　由于npm是外网，在国内安装可能存在网速过慢安装失败，可以尝试将npm换成cnpm（国内的镜像---淘宝镜像），再安装
　　cmd中执行命令：
　　npm install –g cnpm --registry=https://registry.npm.taobao.org
　　即安装cnpm，再把后面的npm全部变成cnpm即可
　　nrm（npm管理工具）的简单使用：
　　安装nrm：npm install -g nrm
　　使用nrm查看可用服务器：nrm ls
　　测试服务器网速：nrm test
　　切换服务器：nrm use taobao
　　之后还是使用npm命令安装，效果一样，只是服务器切换到了taobao