合作工具

144 阅读6分钟

百度地图:

   步骤:
     1、打开百度搜索 百度地图开放平台
     2、注册/登录 百度账号
     3、拉到最下面 注册成为开发者
     4、来到控制台->应用管理->我的应用->创建应用
     5、应用的名称随意->浏览器端应用->白名单:填入*
     6、成功获取到百度提供的密钥
     7、打开导航条里面的开发文档->javascript API->示例DEMO
     8、挑选你喜欢的百度地图:梭代码->改文字,改经纬度

     9、特殊:百度地图更新分为:普通地图 和 GL版地图 两者不能混搭使用,其余都可以

git开发工具(9+)

   分布式版本管理控制工具,分布式:人人都是客户端,人人都是服务器端(云端)
   
   目的:就算我们在家里/多方合作开发也可以一起开发代码
使用:    
         1、先安装:Git-2.18.0-64-bit.exe - 命令行方式
         2、再安装:TortoiseGit-2.6.0.0-64bit.msi - 小乌龟(简化版傻瓜式操作,但是我们git多半都是使用命令行方式,提供了提示图标) - 记得重启电脑
	 3、项目经理/组长:打开http://www.gitee.com网站
		1、注册/登录
		2、创建项目仓库
		3、把仓库地址发给对应的开发人员
	 4、开发成员:
		1、拿着项目经理给你的仓库地址,把仓库拉取到本地,任意位置右键git bash here
			git clone 仓库地址 
		2、关闭掉git bash here,在文件中再次重新打开git bash here
		3、在里面做你的开发/工作
		4、下班之前,提交到云端gitee:
			git add . - 文件提交到了本地
			git commit -m"必须日志" - 文件提交到了git服务器
			git push origin master - 推到云端,只有主分支master可以推到云端
		5、第二天上班之前,更新一下:
			git pull origin master - 更新

		特殊:拉仓库和更新的区别:拉仓库全部都拉一边,更新只会拉取修改过的文件
	5、git分支:
		创建分支:git branch 分支名
		查看分支:git branch
		切换分支:git checkout 分支名
		合并分支:git merge 分支名
		删除分支:git branch -d 分支名

svn开发工具(1-)

SVN1-):集中式版本管理控制工具 - 集中式:服务器只有一台,坏了就锤子啦
					好处:安全性高
	1、项目经理:
	   1、安装svn服务器端:VisualSVN-Server-4.3.2-x64.msi
	   2、为每个开发者创建出账号
	   3、创建项目仓库
	   4、把仓库地址和你的账号发送给你

	2、开发人员:
	   1、安装svn客户端:TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi
	   2、对着任意位置右键:svn checkout - 检出/拉取仓库,记得填上仓库地址
	   3、在里面做开发
	   4、下班前提交到服务器,右键svn commit,填入日志,在提交
	   5、上班时更新一下:右键svn update

gulp打包工具(使用率:2-)

  • 三阶段:webpack(使用率:8+)对应的
   自动化构建工具(打包工具):项目经理/小组长使用的 - 体验流程
   作用:
       *1、复制
       *2、压缩(css/js/图片...)
       *3、降级ES6ES5,降级语法 - 因为ES5之前语法其实都没有变化,ES5只是提供了一些新的API,目的:支持兼容老IE
	4、将scss/less编译为css - 不需要学习,现在的编辑器都自带此功能
	5、重命名 - 不推荐,引入href、src的地方名字都要进行修改

   为什么打包:
	上线过后,不可能使用源代码(1、太大了 2、别的成员/外界也能看的懂)
	肯定使用的是处理过后的代码,目的:1、为了提升网站效率 2、安全性

------------------------------------------------------------------------------------------------------------------------------

   gulp是基于node.js编写的一个第三方模块(包、软件),需要在npm下载:安装的操作一步都不能少

*固定操作安装:1、cmd必须先全局安装gulp(不安的话,cmd提示:gulp不是内部命令) - 必做(运行gulp必要方式),一次性安装永久可用
		 npm i --global gulp
	       2、cmd再你的项目中局部安装 - 可以不做,直接复制代老湿的node_modules到你的项目之中
		 npm i gulp
	       3、cmd在你的项目初始化gulp - 必做 
		 npm init
		 注意:名字需要自己写,但是不能有大写&中文,然后一路回车到底
	       4、配置完成,开始编写属于你自己的gulpfile.js文件!!!必须是这个名字

   如何使用gulp:
   1、先引入var gulp=require("gulp");
   API1、布置任务:
	   gulp.task("任务名",()=>{
		//任务要做什么操作
	   })

	   执行任务:
	     cmd里面输入gulp 任务名;
	     如果想不写任务名,默认执行default任务名的操作

	2、复制
	   gulp.src("入口文件路径"); -- 选中某个、某些源文件
	   gulp.pipe(); -- 管道 -- 输送/插件操作
	   gulp.dest("出口路径"); -- 输送到哪里去?

	   案例:
	   gulp.task("copyAll",()=>{
		gulp.src("源文件路径")
		    .pipe(gulp.dest("出口文件路径"))
	   })

	文件的路径写法:
	  比如:
	    想找到src下面的html下面的1.html:src/html/1.html
	    想找到src下面的html下面的所有的html:src/html/*.html
	    想找到src下面的html下面的所有的文件:src/html/*
	    希望将src下面的/下面的所有内容都复制一份:src/*/*

	恭喜你,已经学会了gulp

2、gulp的插件
   1、压缩css步骤:
      gulp-cssmin插件
      npm下载插件:npm i gulp-cssmin
      查看readme中的example小案例
	使用前记得引入
	gulp.task("copycssmin",()=>{
		gulp.src("src/css/*.css")
			.pipe(cssmin())
			.pipe(gulp.dest("dist"))
	})

   2、压缩js步骤:1、会变为一行省略掉换行和空白字符(变小文件) 2、会把回调函数中的形参全部简化为一个字母,对应的位置都会简化(变小文件的同时加密保护)
      gulp-uglify插件
      npm下载插件:npm i gulp-uglify
	使用前记得引入
	gulp.task("copyjsmin",()=>{
		gulp.src("src/js/*.js")
			.pipe(uglify())
			.pipe(gulp.dest("dist"))
	})

   3ES降级:gulp-babel;  目的:1、语法变回ES5IE也能支持我们写的语法
	  切记用的是babel6
	 *安装:
		1、npm install --save-dev gulp-babel@7 babel-core babel-preset-env
		2、npm install --save-dev babel-preset-es2015  
		3、配置一个文件.babelrc:写入:{
  						"presets": ["es2015"]
						}
          用法:
		使用前记得引入,先降级,在压缩
		gulp.task("copyjsmin",()=>{
		gulp.src("src/js/*.js")
			.pipe(babel())  
			.pipe(uglify())
			.pipe(gulp.dest("dist"))
		})
	  注意:
	   *1、记得要要把严格模式给删掉
	    2、先降级后压缩 - 才能压缩完整

   4、图片压缩插件:
	参考网页:https://blog.csdn.net/x550392236/article/details/78017346
	下载:npm i gulp-tinypng-nokey


懒得做时:
  1、全局的gulp的安装:npm i --global gulp
  2、把node_modules复制到项目中
  3、初始化gulp:npm init
  4、直接把代老的gulpfile.js复制到项目中
  5、修改路径
  6、打开cmd:gulp perfect