TOOL-git&gulp

最新推荐文章于 2024-09-19 23:05:17 发布

DingDing_Zhang

最新推荐文章于 2024-09-19 23:05:17 发布

阅读量211

点赞数

分类专栏： TOOL 文章标签：前端

本文链接：https://blog.csdn.net/DingDing_Zhang/article/details/107797949

版权

TOOL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.GIT&SVN的基本介绍

GIT

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理

SVN

SVN是subversion的缩写，是一个开放源代码的版本控制系统（集中式的版本控制系统），通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理。可以去到任何一个版本

GIT和SVN的区别

GIT对比SVN

2.gitbash的安装和使用

3.生成密钥和公钥

生产公钥
在这里插入图片描述

4.码云和github的使用

5.git常用命令

基本

设置个人账号信息

git config --global user.name “Your Name”
git config --global user.email “email@example.com”

克隆git仓库

git clone

在这里插入图片描述
或者

在这里插入图片描述

将文件加到版本库管理暂存区(stage)

git add (file|.|-A) //file表示文件 .表示当前文件夹(包含子文件夹)的所有未被管理的文件 -A表示所有文件夹未被管理的文件

提交本次修改

git commit -m “描述的内容”

推送本次提交到远程 git push <远程主机名> <本地分支名> <远程分支名>

git push origin master

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6SrnMteT-1596543653799)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200804201503114.png)]

拉取远程代码

git pull // 拉取远程的当前分支
git pull origin master // 拉取远程的指定(master)分支

回退

查看当前分支提交日志(commitId)

git log

重置当前文件夹(包含子文件夹)所有更改(已版本控制的文件)

git checkout .

回退到上一次提交

git reset --hard HEAD^

回退到指定提交

git reset --hard commitId

回退后强制推送到远程仓库

git push -f

分支

切换已有分支

git checkout master // 切换到master分支

创建并切换分支

git checkout -b test // 创建并切换到test分支

从指定分支合并到当前分支

git merge test // 将test分支合并到当前分支

查看分支列表

git branch // *代表当前分支

添加分支

git push origin test // 添加test分支

删除本地分支

git branch -d(elete)

删除远程分支

git push origin –d(elete)

存储

将当前修改移入储藏区(stash)

git stash

查看储藏区列表

git stash list

释放暂存到工作区

git stash@{0} pop (@{0}表示最后一个stash)

在这里插入图片描述

6.gitignore

规则 作用
/mtk 过滤整个文件夹
*.zip 过滤所有.zip文件
/mtk/do.c 过滤某个具体文件
!/mtk/one.txt 追踪（不过滤）某个具体文件
注意：如果你创建.gitignore文件之前就push了某一文件，那么即使你在.gitignore文件中写入过滤该文件的规则，该规则也不会起作用，git仍然会对该文件进行版本管理

配置语法
以斜杠“/”开头表示目录
以星号“*”通配多个字符
以问号“?”通配单个字符
以方括号“[]”包含单个字符的匹配列表
以叹号“!”表示不忽略(跟踪)匹配到的文件或目录
注意： git 对于 .gitignore配置文件是按行从上到下进行规则匹配的

7.前端工程化/构建自动化

为什么要前端工程化

随着近些年来前端技术的不断发展，越来越多复杂的业务放在了前端，前端不再是以前几个HTML+CSS+JS就能解决的了。业务复杂了，需要维护的代码量就自然多了，如此一来，前端代码的可靠性，可维护性，可拓展性，以及前端web应用的性能，开发效率等等各方面就成了不得不考虑的问题，于是我们就产生了前端工程化这个概念，来解决这些问题。现阶段的前端工程化，需要考虑到各个方面，包括但不限于以下这几点：

提升开发效率
1. 热加载
2. 数据mock
性能优化
1. 代码压缩，混淆加密
2. 图片压缩，雪碧图减少请求次数
3. 部署静态文件缓存管理
提高代码质量
1. 模块化
2. CSS预处理
3. ES6代码编译
4. eslint代码检查
5. 单元测试
6. UI自动化测试
7. web组件化

前端工程化的发展

script标签直接引入加载
模块化标准
自动化构建（gulp/grunt）
模块化打包（webpack）

Gulp与Webpack

经过Gulp合并压缩后的代码仍然是你写的代码，只是局部变量名被替换了，一些语法做了转换而已，整体的内容并没发生变化，而webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。在编译过程中，webpack工程会自动载入一些内容

8.gulp的基本介绍

Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于Node.js构建的，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。Gulp.js源文件和你用来定义任务的Gulp文件都是通过JavaScript源码来实现的

9.gulp的安装

gulp使用基于node环境，安装使用gulp前需要安装node（node的安装和使用详见day33的内容）
npm(cnpm) i gulp-cli -g 命令全局安装gulp-cli，gulp的命令行工具
新建一个项目文件夹并进入，npm init 命令初始化当前项目文件夹包管理文件，系统会自动生成package.json文件
npm(cnpm) i gulp@3 --save-dev(-D) 命令当前项目文件夹下安装gulp
项目文件夹根目录下创建gulpfile.js文件
根目录下起命令 gulp taskName 跑指定任务当任务名为default时可以省略任务的名称

10.gulp的常用方法

gulp.task

定义一个使用Orchestrator实现的任务（task）

gulp.src

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个Vinyl files的stream它可以被piped到别的插件中

gulp.dest

能被pipe进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它pipe到多个文件夹。如果某文件夹不存在，将会自动创建它

gulp.watch

监听文件或者文件夹的变化，并执行任务

11.gulp的常见任务

复制文件

gulp.task('copy', () => {
    gulp.src('./index.html')
    .pipe(gulp.dest('./dist'))
})

合并文件

const concat = require('gulp-concat');      // 引入依赖，合并文件 需要安装gulp-concat包

gulp.task('concat', () => {
    gulp.src("./gulp/**/*.js")
    .pipe(concat("main.js"))        //合并
    .pipe(gulp.dest("./dist"))
})

编译sass

const sass = require('gulp-sass');                  // 引入依赖，解析sass 需要安装gulp-sass包
const autoprefixer = require('gulp-autoprefixer');  // 引入依赖，自动补全CSS3样式 需要安装gulp-autoprefixer包
const cleancss = require('gulp-clean-css');         // 引入依赖，压缩CSS 需要安装gulp-clean-css包
const rename = require('gulp-rename');              // 引入依赖，重命名文件 需要安装gulp-rename包

gulp.task('sass', () => {
    gulp.src('./src/sass/*.{scss,sass}')
        .pipe(sass())        // 通过sass插件将sass编译为css，如果需要编译less，则改用less插件
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(concat('all.css'))
        .pipe(cleancss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/src/css'))
})

操作js

const babel = require('gulp-babel');                // 引入依赖，ES6转ES5 需要安装gulp-babel,babel-core,babel-preset-env包
const uglify = require('gulp-uglify');              // 引入依赖，丑化压缩js 需要安装gulp-uglify包

gulp.task('js', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({             // 通过babel插件将ES6转成ES5
            presets: ['env']
        }))
        .pipe(uglify())           // 丑化js代码
        .pipe(rename({            // 重命名
            suffix: '.min'          // 添加后缀
        }))
        .pipe(gulp.dest('./dist/src/js'))
})

压缩图片

const imagemin = require('gulp-imagemin');          // 引入依赖，压缩图片 需要安装gulp-imagemin包

gulp.task('image', () => {
    gulp.src('./src/images/*')
        .pipe(imagemin([
            imagemin.gifsicle({
                interlaced: true
            }),
            imagemin.jpegtran({
                progressive: true
            }),
            imagemin.optipng({
                optimizationLevel: 5
            }),
            imagemin.svgo({
                plugins: [{
                    removeViewBox: true
                },
                {
                    cleanupIDs: false
                }
                ]
            })
        ], {
            verbose: true
        }))
        .pipe(gulp.dest('./dist/src/images'));
})

12.完整的gulpfile.js

//引入gulp
const gulp = require('gulp');

//引入组件
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleancss = require('gulp-clean-css');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const del = require('del');

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

gulp.task('sass', () => {
    gulp.src('./src/sass/*.{scss,sass}')
        .pipe(sass())        // 通过sass插件将sass编译为css，如果需要编译less，则改用less插件
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(concat('all.css'))
        .pipe(cleancss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/src/css'))
        .pipe(reload({
            stream: true
        }));
})

gulp.task('js', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({             // 通过babel插件将ES6转成ES5
            presets: ['env']
        }))
        .pipe(uglify())           // 丑化js代码
        .pipe(rename({            // 重命名
            suffix: '.min'          // 添加后缀
        }))
        .pipe(gulp.dest('./dist/src/js'))
        .pipe(reload({
            stream: true
        }));
})

gulp.task('image', () => {
    gulp.src('./src/images/*')
        .pipe(imagemin([
            imagemin.gifsicle({
                interlaced: true
            }),
            imagemin.jpegtran({
                progressive: true
            }),
            imagemin.optipng({
                optimizationLevel: 5
            }),
            imagemin.svgo({
                plugins: [{
                    removeViewBox: true
                },
                {
                    cleanupIDs: false
                }
                ]
            })
        ], {
            verbose: true
        }))
        .pipe(gulp.dest('./dist/src/images'));
})

gulp.task('index', () => {
    gulp.src('./index.html')
        .pipe(gulp.dest('./dist'))
        .pipe(reload({
            stream: true
        }))
})

gulp.task('html', () => {
    gulp.src('./html/*.{html,htm}')
        .pipe(gulp.dest('./dist/html'))
        .pipe(reload({
            stream: true
        }))
})

gulp.task('layout', () => {
    gulp.src('./layout/*.{html,htm}')
        .pipe(gulp.dest('./dist/layout'))
        .pipe(reload({
            stream: true
        }))
})

gulp.task('lib', () => {
    gulp.src('./src/lib/**/*')
        .pipe(gulp.dest('./dist/src/lib'))
        .pipe(reload({
            stream: true
        }))
})

gulp.task('delete', () => {
    return del(['./dist']); // 加return 方法变为同步
})

gulp.task('default', () => {
    gulp.start('serve');
})

gulp.task('serve', ['index', 'sass', 'js', 'image', 'layout', 'html', 'lib'], function () {
    browserSync.init({
        server: {
            baseDir: './dist',
            index: './index.html'
        },
        port: 8888
    });

    gulp.watch('./index.html', ['index']);
    gulp.watch('./src/sass/*.{scss,sass}', ['sass']);
    gulp.watch('./src/js/*.js', ['js']);
    gulp.watch('./src/images/*', ['image'])
    gulp.watch('./layout/*.{html,htm}', ['layout']);
    gulp.watch('./html/*.{html,htm}', ['html']);
    gulp.watch('./src/lib/**/*', ['lib']);
})