前端从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 push origin :20201109 删除远程分支(需先在本地删除该分支)
$ 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时,先将本地修改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://