构建工具-git-svn-gulp-webpack

it2023-10-19  64

 

 

 

 

https://www.liaoxuefeng.com/wiki/参考站点

安装:git:分布式版本管理系统

在项目下,鼠标右击使用git bash

初始化(创建版本库):git init 会出现.git

pwd 会显示目录路径:请不要使用中文

who you are

git config --global user.name "Your Name" git config --global user.email "email@example.com" git config --global user.name "晁阳" git config --global user.email "2279679717@qq.com"

增加

首先add

git add hello.js//此时只是放到了暂存区

然后commit

git commit -m '描述'//此时提交到版本库,进行管理master

查看版本库当前状态

git status git diff //查看未添加的修改

版本日志

git log 会显示版本日志,时间倒序 commit e2c269d46087a337f3f333bedccb6211db8a12ae//版本号---- Author: cy <2279679717@qq.com> Date:   Sun Dec 30 14:25:26 2018 +0800 git relog看卡你的日志,包括回退等

版本回退

git reset --hard HEAD^回退一个版本 git reset --hard HEAD^^回退两个个版本....依次类推几个^回退几个版本 ​ //版本前进 git reset --hard e2c269d46087a337//部分版本号即可

删除文件

rm 文件名 git rm git commit -m '删除'

分支管理

创建分支

git checkout -b cy//创建并进入分支

查看分支

git branch

切换分支

git checkout master

合并分支

首先合并分支,比如,你想用master合(吞)并掉cy分支 git checkout master 来到master下 git merge cy

删除分支

git branch -d cy -D

解决冲突

解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容,再提交。

远程仓库

ssh-keygen -t rsa -C "youremail@example.com"//已经生成pub秘钥 1--GitHub上 echo "# -" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/cy2zq/-.git git push -u origin master

git上传忽略node_modules

输入 touch .gitignore ,生成“.gitignore”文件。 在”.gitignore” 文件里输入你要忽略的文件夹及其文件 .DS_Store node_modules/ dist/ npm-debug.log

构建工具

自动化,对于需要反复重复执行的任务,可以使用自动化完成,例如:压缩、代码检查、测试等等...

安装全局gulp

cnpm install --global gulp

安装项目依赖

cnpm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件

 var gulp = require('gulp');  gulp.task('default', function() {    // 压缩,合并...    console.log("hello gulp"); })

gulp常用方法:

gulp.task(str,fn)    创建一个gulp任务  gulp.src(path)    文件来源  gulp.dest(path)    操作之后的文件到哪里去 .pipe(package)    执行一个gulp功能  gulp.watch()    监听  gulp.start()    执行gulp任务

gulp:插件作用(以下插件都是项目依赖)

压缩js第三方插件

cnpm install --save-dev gulp-uglify

压缩CSS文件

cnpm install --save-dev gulp-minify-css

压缩HTML文件

cnpm install --save-dev gulp-minify-html

压缩图片文件

cnpm install --save-dev gulp-imagemin      https://github.com/sindresorhus/gulp-imagemin      ffmpeg

代码检查

cnpm install --save-dev gulp-jshint jshint 注意:很多公司是有自己learder修改的编码方式 // bad good

合并、重命名

cnpm install --save-dev gulp-concat gulp-rename

集中式版本管理系统:SVN

也叫版本控制器或版本迭代器,换句话说就是存储和管理我们的代码的地方 版本库存在中央服务器:一台服务器 当我们使用时,需要从中央服务器更新代码 可以使用内网(局域网),和外网(互联网) 缺点:但必须依赖网络;一旦中央服务器出现问题,将无法继续进行工作

安装--安装visualSVN:这是中央服务器

端口:443--80;8443--8080

创建新的资源库

创建用户

右击新建的资源库copy资源库的地址

上传:导入:但为关联--单向数据流

检出:双向关联:会有.svn文件

图标

绿色对号:成功

黄色感叹号:冲突

红色感叹号:与服务器不一致

安装客户端

不用SVN时,记得要关闭,否则端口会被占用(正方形)

 

webpack:构建工具

构建工具:常用场景:react / vue

自带模块化(commonJS规范)

自带服务器,服务器也是基于node(webpack-Dev-server)

编译:es6->es5;jsx->es5;ts(typescript)->js

gulp所做的事情,webpack都可以做到

中文文档:https://www.webpackjs.com/concepts

安装3.x

cnpm install -g webpack@3.x // 全局已经安过,可以省略 npm init//创建package.json - 创建两个文件夹src和dist ​ - src:源码文件 - dist:压缩过后文件 ​ - 执行webpack ​   webpack src/app.js   dist/bundle.js

快捷执行

"scripts": {    "build": "webpack" } var path = require('path'); const config = {  entry: './src/app.js',  output: {    path: path.resolve(__dirname,'dist'),    filename: 'bundle.js' } }; module.exports = config;  
最新回复(0)