day28git和gulp

一、git:

    分布式版本管理控制工具

    开发人员的电脑，既可做服务器，也可做客户端

    可以把代码共享到github备份,不用担心数据丢失问题

二、本地操作git

     1.初始化项目仓库

      在HBuilder中创建一个项目名为gitdemon,然后在这个项目右击打开文件所在目录，然后在空白处右击点击Git Bash here，再输入命令：git init。目的是初始化，         会在目录中生成一个.git文件。

  2.创建项目html或者其他或者修改代码

  3.查看某些文件或文件夹是否被git管理

    命令：git status

          3.1如果项目中有xxx.txt文件，是无用的文件，则使用命令：touch .gitignore 创建一个.gitignore文件，把不需要提交的文件路经（路经是根据.gitignore来说的）添加到.gitignore文件中（在HBuilder中不可见，在项目路经下可以打开修改） 

  3.将某个文件添加到本地的git上 被git管理

   命令：git add 文件名

   +：表示已经被添加到本地git上,还没有被提交到git的服务器上，说明已经被git管理了

4.批量添加某些文件被git管理

   git add .  或  git add --all

6.提交被管理的文件到git服务器上

   命令：git commit -m"日志";//日志必需写

7.修改文件，文件被修改后，先添加再提交

8.查看git版本日志信息：

   命令：git log

9.回退某个版本

   git reset --hard 695ebb(前六位哈希值，在日志中)

 10.命令：git reflog  查看所有的日志

 11.git reset --hard 695ebb  继续使用这个命令，退回到你想要的位置（后悔药）

 三、分支

    分支

   主分支：master

   a.查看分支

      命令：git branch

   b.创建分支

      命令：git branch 分支名

   c.切换分支：

      命令：git checkout 分支名

   d.创建并切换到某个分支

      命令：git checkout -b 分支名

      在项目中做一些修改，在主分支下是看不到，在这个分支下是可以看到的。合成分支，就可以在主分支上查看了。

   e.在master上合并分支：(如果不在主分支上，需要切换到主分支上再作此操作)

      命令：git merge 分支名

   f.在master下的删除分支

      命令：git branch -d new2

  四、通过git操作github上的项目：

     github git的服务提供商，通过github可以上传项目，项目可以通过github来管理

  通过git操作github上的项目：

  1.在github上创建一个项目仓库

    

然后直接按create repositiony创建即可

 

  2.在你所需要的地方右击Git Bash here 。通过git克隆一个github仓库

      命令：git clone https://github.com/ZhouGuanQi/myDemo.git

  3.在有.get的目录下右击Git Bash here

    在HBuilder中创建所要上传的项目添加到目录中

    3.1如果项目中有xxx.txt文件，是无用的文件，则使用命令：touch .gitignore 创建一个.gitignore文件，把不需要提交的文件完全路经（路经是相对于.gitignore来说的）添加到.gitignore文件中（在HBuilder中不可见，在项目路经下可以打开修改）

  4.git add .把项目添加到git中管理

  5.git commit -m"添加了一个项目",提交到git服务器

  6.git push -v origin master 在主分支master上以流的方式向github推送。就可在网页上Github中就可以看见你上传的项目。

  7.输入github的用户名和密码

  8.如果在线上修改了项目，线下同步线上：

      命令：git pull origin master（这个可靠）

      或：新建一文件夹用git clone命令重新克隆一个（这个不常用）

五、gulp  前端自动化工具--插件（grunt）

      压缩--合并--复制粘贴

      使用npm，npm是包管理器

gulp5个api：

1）task（）；

2）src（）；

3）pipe（）；

4）dest（）；

5）watch（）；

1.安装

        先安装node.js环境(官网下载)

        在cmd中输入node -v命令， 查看node安装版本

        

        安装gulp以及所有的步骤:在cmd中输入命令

         1）全局安装：npm install gulp -g

         2）在HBuilder中创建gulpDemo项目目录， 打开项目所在                     的目录，在路径中直接输入cmd，然后执行下一步

         3）在目录下安装  在cmd中输入命令：npm  install gulp --save-dve;

         4）配置package.json文件命令：    npm init -y

         5)运行gulp：命令：gult

               输出的是： No gulpfile found没有找到gulpfile这个文件

               说明bulp所有任务都将在gulpfile文件下执行

                在HBuilder手动创建gulpfile.js文件（建在项目名的一级                    目录下）(必需是这个文件)

         6）再运行gulp：命令：gult

               输出的是： Task 'default' is not in your gulpfile

               说明gulpfile.js中没有可执行的任务，于是就要在                               gulpfile.js中编写代码

         7)   1.引入glup模块  (gulpfile.js中编写代码)

                var gulp = require("gulp");

           2.在gulp下布置多个任务task();

     gulp中的方法

            task()布置任务

            有三个参数：

            第一个参数：任务名称 默认任务 default

            第二个参数：该任务依赖的其它任务 是一个数组（可选）

            第三个参数：任务回调函数（任务执行

               gulp.task("default",function(){

                console.log("default任务执行了");

               })

               gulp.task("task1",function(){

                  console.log("task1任务执行了");

               })

               gulp.task("task2",function(){

                  console.log("task2任务执行了");

               })

          8)启动执行

              命令：gulp 任务名；（gulp task1）不写任务名，就默认                            执行default任务。

              多个任务一起执行：在默认任务的第二个参数以数组的方                                                  式把其它需要执行的任务依赖注入进去           gulp.task("default",["say","dance"...],function(){

                    console.log("default任务执行了");

                }) （数组里的顺序可以不用管）  

            再执行命令：gulp   （执行时的顺序是，先执行数组里的，                在执行default）

         9）布置一个任务，将src目录下的index.html文件复制到desth                目录下

               src()源文件路径

               pipe()管道输送

               dest()目标目录

       gulp.src("src/index.html").pipe( gulp.dest(目标目录) );

         例子：gulp.task("copyhtml",function(){

    gulp.src("src/index.html").pipe(gulp.dest("desth"));

})

     10)布置一个任务：将lib目录下的所有js文件复制到js目录下

         gulp.task("copyall",function(){

    gulp.src("lib/*.js").pipe(gulp.dest("js"));

})  11）src参数可以是一个数组

布置一个任务：将src下的css文件和lib下的css文件复制到dest目录下

gulp.task("copyall",function(){

    gulp.src(["src/*.css","lib/*.css"]).pipe(gulp.dest("dest"));

})

12）gulp.src("lib/*")与gulp.src("lib/*/**的区别")

1.lib/*：代表lib下的所有一级目录的文件,不包含二级目录文件

  gulp.task("copyall",function(){

gulp.src("lib/*").pipe(gulp.dest("dest"));  

})

2.lib/**：代表lib下的所有文件，包含一级目录以及所有二级目录文件和多级目录文件

    gulp.task("copyall",function(){

gulp.src("lib/**").pipe(gulp.dest("dest")); 

})

3.lib/*/*.js：代表lib下的二级目录下的js结尾的文件，

   gulp.task("copyall",function(){

    gulp.src("lib/*/*.js").pipe(gulp.dest("js/js1"));

})

4.lib/*/*：代表lib下的二级目录下的的文件，不包括一级

   gulp.task("copyall",function(){

    gulp.src("lib/*/*").pipe(gulp.dest("js/js1"));

})

5.lib/*/**:代表lib下的二级目录下的所有文件（包括三级以及更多）不包括一级

gulp.task("copyall",function(){

    gulp.src("lib/*/**").pipe(gulp.dest("js/js1"));

})

2.什么是gulp

        gulp:前端自动化工具

        作用（插件功能）：

            复制

            自动化压缩js文件、css文件

            自动压缩图片文件

            自动合并文件

            文件重命名

3.安装插件：在cmd中输出命令下面这些命令后，才可以压缩、重命名、合并

    gulp-concat：npm install gulp-concat --save-dev //文件合并

    gulp-cssmin：npm install gulp-cssmin --save-dev //css文件压缩

    gulp-rename：npm install gulp-rename --save-dev //文件重命名

    gulp-uglify：npm install gulp-uglify --save-dev //js文件压缩

//导入其他资源

var concat=require("gulp-concat");

var cssmin=require("gulp-cssmin");

var rename=require("gulp-rename");

var uglify=require("gulp-uglify");

//发布一个任务 ，

gulp.task("cssmin",function(){

    return gulp.src("src/css1.css")

           .pipe(cssmin())

           .pipe(rename("index.min.css"))

           .pipe(gulp.dest("htm1"));

})

//发布一个任务 ，

gulp.task("concat",function(){

    return gulp.src("js/*.js")

           .pipe(concat("pub.min.js"))

           .pipe(uglify())

           .pipe(gulp.dest("dist/js"))

})

4.每次修改代码都要执行，则我们用自动监听；s使文件自动执行更新.

//发布一个任务，任务监听其他任务的执行。

gulp.watch("任务源(也就是src)",["任务名"]);

gulp.task("watchall",function(){

      gulp.watch(["src/index.hmtl","src/css1.css"],["copyHtml","cssmin"]);

})(任务源和任务名可以有多个，且顺序可以顺便，但是任务名有一个时，也要用[])