【记】git,webpack相关记录

前端从grunt、gulp,到browserify,再到现在的webpack,构建和打包的工具层出不穷,好在webpack现在有些一统天下的苗头.

这里记录一些webpack的常用命令和配置,还有一些git的常用命令。

记录一些git,webpack的命令和特性

1.webpack及相关命令

1.1 安装及初始化 ( webpack是基于node的模块加载器、打包工具 )

npm install webpack -g ( 安装在全局 )

在项目目录内生成或创建package.json工程文件 ( 需要依赖模块、库描述、版本、作者... )

npm install webpack -D ( 项目本地安装 )

webpack.config.js为定义webpack任务的配置文件

1.2 命令

安装时后缀--save dev表示开发时候依赖的东西,依赖记录在devDependencies,比如babel功能。后缀--save表示发布之后还依赖的东西,依赖记录在dependencies,比如jquery。

webpack (开发环境下的编译,默认运行的是webpack --config webpack.config.js)

webpack -p (生产环境下的编译,压缩)

webpack -w (监听文件改动,自动编译)

webpack -d (开启source-map,可用devtool实现)

webpack -wdp (参数累加)

在命令行输入webpack entry.js bundle.js指定入口文件和生成文件 ( 功能复杂后将配置写在webpack.config.js中 )

1.3 loader的安装和配置

一个应用了css loader和source-map的简单配置如下:

module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口
    },
    devtool: 'source-map', //直接生成srouce-map 调试源码
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'    //!号用来连接style-loader和css-loader
                                   //此处统一配置后在entry.js中
                                   //require('style-loader!css-loader!./style.css')可以改写为
                                   //require('./style.css');
        }
    }
};

上述module.exports为commonJs的模块导出写法,对应其导入写法为require("a.js");

还可以用es6提供的模块导出方法export或export default,模块导入为import name from 'a.js',该方法需要依赖babel

npm install style-loader css-loader -D (css和style两个loader的安装)

npm install babel-loader babel-core babel-preset-es2015 -D (babel的安装)

加入了babel的配置为:

module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/ //排除某些目录不用转化
        }]
    },
    babel:{   //为babel设置预设,或者在目录下创建.babelrc写入预设
        "presets":['es2015']
    }
1.4 开发时的server环境(需要安装和配置webpack-dev-server)

npm install webpack-dev-server -g (安装)

webpack-dev-server --port 8088 (起服务,定端口号)

webpack-dev-server --inline (自动刷新)

webpack-dev-server --hot (热重载)

webpack-dev-server --port 8088 --inline --hot (组合)

可将上述命令配置进webpack.config.js中然后直接运行webpack-dev-server :

devServer: {
        port: 8087,
        inline: true
    }

或者配置在package.json中然后直接运行npm run dev :

"scripts": {
    "dev": "webpack-dev-server --inline --hot --port 8088"
  }

忽略后缀名的配置的配置: ( 如引入style.css时不指定后缀 require('./style') )

resolve: {
        "extensions": ['.js', '.css', '.json', '.jsx'] //可以省略后缀名
    }
1.5 插件plugins

插件用来丰富和强大打包功能,有些插件是内置的,有些则需要安装依赖

var path = require('path'); node内置对象,用来处理路径:详细配置mark

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkHash:8].js',
    chunkFilename: '[name].[chunkHash:8].js'
  }

var webpack = require('webpack'); webpack内置对象,提供多个插件功能:

plugins:[
      new webpack.optimize.CommonsChunkPlugin({
          name: ['vendor','manifest']
          //有多个入口文件时,指定公共模块的名字并生成
      })
  ]

var HtmlWebpackPlugin = require('html-webpack-plugin'); HtmlWebpackPlugin插件,自动生成html文件。引入前需要先安装: npm install html-webpack-plugin --save-dev 。详细配置mark

plugins:[
      new HtmlWebpackPlugin()
  ]

var ExtractTextPlugin = require('extract-text-webpack-plugin'); css分离打包插件。安装: npm install --save-dev extract-text-webpack-plugin

plugins:[
      new ExtractTextPlugin('./css/[name].css'),
    ]

2.linux下Git服务器搭建

2.1安装服务端git
[root@localhost]# yum install -y git  //安装
[root@localhost]# git --version       //安装后查看git版本
[root@localhost]# adduser git         //添加用户
[root@localhost]# passwd git          //设置密码
[root@localhost git]# git init --bare ar.git   //进入/home/git目录下 创建名为ar的git库
[root@localhost git]# chown -R git:git ar.git  //把仓库的owner改为git
[root@localhost git]# mkdir .ssh               //在git目录下创建.ssh目录
[root@localhost git]# chown -R git:git .ssh    //把.ssh文件夹的owner修改为git

此时客户端可以从服务端clone克隆项目了,如下:

$ git clone git@192.168.1.102:/home/git/ar.git

Are you sure you want to continue connecting (yes/no)? 提示输入yes

接着输入git密码就可以完成克隆了

2.2配置ssh密钥方式clone库

首先确保客户端有生成过SSH公钥和私钥,若没有则如下生成:

$ ssh-keygen -t rsa -C "11111@qq.com"

此时 C:\Users\用户名\.ssh 下会多出两个文件 id_rsa 和 id_rsa.pub。id_rsa是私钥,id_rsa.pub是公钥

接着在服务器端设置Git打开RSA认证,进入 /etc/ssh 目录,编辑 sshd_config,打开以下三个配置的注释:

RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile .ssh/authorized_keys

覆盖后重启ssh服务: /etc/rc.d/init.d/sshd restart

回到 Git Bash 下,导入文件:

$ ssh git@192.168.1.102 'cat >> .ssh/authorized_keys' < ~/.ssh/id_rsa.pub

需要输入服务器端git用户的密码,回到服务器端查看.ssh下是否存在authorized_keys文件.正常应该生成了并且自动写入了客户端生成的公钥.或者手动把客户端文件id_rsa.pub里面的内容,复制到服务端文件authorized_keys中.然后修改目录权限

[root@localhost git]# chmod 700 .ssh
[root@localhost git]# cd .ssh
[root@localhost .ssh]# chmod 600 authorized_keys 

此时客户端再clone库时就不需要输入密码了。

2.3禁止git用户通过ssh登录服务器

编辑/etc/passwd文件完成。找到类似下面的一行:

git:x:1001:1001:,,,:/home/git:/bin/bash  

改为:

git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell 

此时git用户可以正常通过ssh使用git但无法通过ssh登录系统。

2.4管理公钥

如果团队很小,把每个人的公钥收集起来放到服务器的/home/git/.ssh/authorized_keys文件里就是可行的,如果团队人多可以用Gitosis来管理公钥。

2.5服务器hook设置

有时我们希望客户端push到git服务器时,代码自动发布到生产环境服务器,此时需要设置hook.

首先进入$ cd /home/git/test.git/hooks/目录找到post-receive.sample文件,去掉后缀并写入:

.
.
#. /usr/share/git-core/contrib/hooks/post-receive-email
cd /yjdata/www/ar    //项目目录
unset GIT_DIR        
git pull origin master

接着$ chmod +x post-receive //给钩子文件添加执行权限(hooks目录下执行)

最后设置项目目录权限。例如你hooks的脚本是操作/yjdata/www/swoole这个文件的话,此时的git用户组和用户名都是git的话,那么执行 sudo chown -R git:git /yjdata/www/swoole

如果客户端push后钩子失败,可以先在服务端目标目录下clone该仓库: clone git clone /home/git/cms.git

3.Git使用命令

3.1初始化

$ git config --global user.name "Your Name" ( 初始化设置 )

$ git config --global user.email "email@example.com" ( 初始化设置 )

$ git init ( 将当前目录转为git仓库 )

$ git add readme.txt ( 把工作区文件添加到暂存区 )

$ git commit -m "修改描述" ( 把存在暂存区的文件提交到版本库 )

3.2版本回退(已经commit)

$ git status ( 查看当前仓库状态 )

$ git diff readme.txt ( 查看之前的修改内容 )

$ git log --pretty=oneline ( 查看提交记录,显示commit id )

$ git reset --hard HEAD^ ( 版本库返回到当前的上一个版本 )

$ git reset --hard 3628164 ( 根据commit id返回到某个版本 )

$ cat readme.txt ( 查看文件 )

$ git reflog ( 记录之前的操作命令,查看历史版本号 )

$ git revert HEAD ( 撤销一个已经push的版本,并在本地产生一个新的commit )

3.3工作区暂存区

3.4撤销和删除(本地修改后还未commit)

$ git checkout -- readme.txt ( 回到最近一次git add或git commit时的状态 )

$ git clean -df (删除所有untracked的文件.和下一条命令类似,容易混淆)

$ git checkout -- . (删除素有没有add/commit的本地修改,都返回到原来的状态.和上一条命令的区别在于只是撤销"修改"的文件)

$ git reset HEAD readme.txt / $ git reset HEAD ( 撤销add/暂存区,回到工作区 )

$ rm test.txt ( 把删除动作提交到暂存区 )

3.5远程仓库(github,gitlab等)

$ ssh-keygen -t rsa -C "youremail@example.com" ( 本地先创建SSH Key )

$ git remote add origin git@github.com:username/text.txt ( 将本地版本库与远程origin建立连接 )

$ git push -u origin master ( 将本地版本master推送到远程,首次加-u,会关联master的分支 )

$ git push origin dev

$ git clone git@github.com:username/demo.git ( 克隆一个远程项目到本地 )

$ git remote -v ( 查看远程库信息,-v表示详细信息 )

3.6分支管理

$ git branch dev ( 创建分支 )

$ git checkout dev ( 切换分支 )

$ git checkout -b dev ( 创建并切换分支 )

$ git branch ( 查看当前分支 )

$ git merge dev ( 将dev分支合并到当前版本 )

$ git branch -d dev ( 删除分支 )

$ git branch -D dev (强行删除一个没有合并的分支)

$ git log --graph --pretty=oneline --abbrev-commit ( 合并查看,分支冲突时需要合并 )

$ git merge --no-ff -m "merge with no-ff" dev ( 禁用Fast forward模式,merge时生成一个新的commit )

3.7bug解决 ( 当在开发时需要根据之前版本解决bug时 )

$ git stash ( 储存当前分支的当前工作现场 )

$ git stash list ( 显示当前分支的所有储存过的工作现场 )

$ git stash apply stash@{0} ( 恢复到某个工作现场,恢复后该现场不删除 )

$ git stash pop stash@{0} ( 恢复后删除现场 )

3.8标签管理 ( 快照某个版本,方便以后直接查找 )

$ git tag v1.0 ( 创建新标签 )

$ git tag ( 查看所有标签 )

$ git tag v0.9 6224937 (对之前commit过得版本库打tag)

$ git show v0.9 ( 查看标签信息 )

$ git tag -a v0.1 -m "version 0.1 released" 3628164 (详细方法,-a指定tag名为v0.1)

$ git tag -d v0.1 ( 删除标签 )

$ git push origin v1.0 ( 推送某个标签到远程 )

$ git push origin --tags ( 推送所有还未推送的标签到远程 )

$ git push origin :refs/tags/v0.9 ( 删除远程的tag,需要先删除本地 )

$ git fetch origin tag (拉取远程tag)

拉取tag时,先将本地修改commit.但是这时候 git 可能会提示你当前处于一个“detached HEAD" 状态,因为 tag 相当于是一个快照,是不能更改它的代码的,如果要在 tag 代码的基础上做修改,你需要一个分支:

$ git checkout -b branch_name tag_name

要取得不同的branch的tag,只需要在相应的分支上打tag就行了。这样的tag就唯一对应了不同的分支。例如,你在master上打了tag为v1,在某个branch上打了tag为v2,则你取出v2代码的时候,自然就是对应的branch分支了.

3.9远程库的操作

$ git remote (不带参数,列出已经存在的远程分支)

$ git remote -v (列出远程库和其地址)

$ git pull origin angular:angular (拉取远程分支到本地,创建对应分支)

$ git fetch origin master (指定远程master分支为本次的fetch-head)

$ git log -p master..origin/master(对比本地分支和远程分支,必须先执行上一步才能对比)

$ git branch --set-upstream master origin/master (将远程dev分支与本地dev分支关联,后续可以pull远程dev分支)

$ git pull origin master --allow-unrelated-histories (强制将远程库合并到本地)

或者通过$ git gui图形化工具查看对比.(选择gui的版本库->图示所有分支的历史)

$ git merge origin/master (将远程分支合并到本地)

FETCH_HEAD指的是: 某个branch在服务器上的最新状态,我们通过fetch拉取后,就可以和服务器对比.FETCH_HEAD只是方便我们查看最新状态,对比后再选择是否merge,FETCH_HEAD不影响本地分支

以上三个步骤等价于git pull,先拉取到远程库最新的,可以对比后选择merge

$git fetch origin master:new (将远程仓库的fetch_head拿来在本地创建new分支)

$git diff new (diff new分支)

$git merge new (合并分支)

以上三个步骤是将远程库直接生成到本地的分支一个分支,然后对比,最后merge

3.10 .gitignore过滤文件

.gitignore文件可以控制项目目录下的某些目录或者文件,不受git的版本库管理.但是对已经加入版本库的文件不能生效,因此需要利用命令将想要忽略的文件从版本库中删除.

//.gitignore的常用写法
node_modules/
.git
**/.git
.idea/*
*.img
test/unit/

4.git Submodule (子模块管理)

git Submodule 是一个很好的多项目使用共同类库的工具,他允许类库项目做为repository,子项目做为一个单独的git项目存在父项目中,子项目可以有自己的独立的commit,push,pull。而父项目以Submodule的形式包含子项目,父项目可以指定子项目header,父项目中会的提交信息包含Submodule的信息,再clone父项目的时候可以把Submodule初始化.

4.1添加Submodule
git submodule add git@github.com:ar/ar.git ar //把ar库添加为子库,注意库名与路径名须一致

使用 git status命令可以看到

On branch master
    Changes to be committed:
    new file:   .gitmodules
    new file:   ar

可以看到多了两个需要提交的文件:.gitmodules和 ar; .gitmodules 内容包含Submodule的主要信息,指定reposirory,指定路径.这两个文件都需要提交到父项目的git中,使用命令添加Submodule:

git add .gitmodules ar
git commit -m "submodule"
git submodule init
4.2修改Submodule

先在子模块内:修改->add->commit->push;然后再回到主项目下修改和上传变动.

4.3更新Submodule

更新Submodule有两种方式:

1.在父项目的目录下直接运行:git submodule foreach git pull

2.在Submodule的目录下面更新,但更新后,主项目还要针对这次变动做次commit

4.4clone Submodule

clone Submodule有两种方式 一种是采用递归的方式clone整个项目,一种是clone父项目,再更新子项目。

1.采用递归参数 --recursive

git clone git@github.com:ar/ar.git --recursive

2.先clone父项目,再初始化Submodule.

 git clone git@github.com:ar/ar.git
 cd ar
 git submodule init
 git submodule update
4.5删除Submodule

git 并不支持直接删除Submodule需要手动删除对应的文件:

 //git rm --cached ar //--cached 当我们需要删除暂存区或分支上的文件, 但本地又需要使用, 只是不希望这个文件被版本控制
 git rm ar
 git rm .gitmodules
 //不需要可以手动删除工作区文件
 //linux下rm删除
 //rm -rf ar      //递归删除目录级内部
 //rm .gitmodules

然后在主项目commit此次变动

5.bower包管理

- bower安装: $ npm install -g bower

- bower init 命令来创建bower.json,定义依赖关系

- 直接下载 git 库: bower install git://github.com/JSLite/JSLite.git

- 下载线上的任意文件: bower install http://foo.com/jquery.awesome-plugin.js

- 注册自己的bower包: bower register swiper_js git@github.com:archerone/swiper_js.git

- $ bower install jquery --save 添加依赖并更新bower.json文件

- $ bower cache clean 安装失败清除缓存

- $ bower install storejs 安装storejs

- $ bower uninstall storejs 卸载storejs

- 由于bower下载有时较慢,可以全局设置用https方式替换git:

- git config --global url."https://".insteadOf git://

 欢迎转载:转载时请注明本文出处及文章链接

标签:


添加新评论

captcha
请输入验证码