# 开发环境	
## 3.1 Git操作	
### 3.1.1 Git的基本命令有哪些
```js
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

```	
### 3.1.2 git rebase和git merge的区别？
**git merge**：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

**git rebase**：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。
### 3.1.3 git上线回滚的流程？
上线流程：
1. 将测试完成的代码提交到git版本库的master分支
2. 将当前服务器的代码全部打包并记录版本号，备份
3. 将master分支的代码提交覆盖到线上服务器，生效新的版本号
回滚流程：
1. 将当前服务器的代码打包并记录版本号，备份
2. 【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

## 3.2 模块化	
### 3.2.1 谈一下你对JS模块化的理解	
### 3.2.2 AMD和CommonJS规范的区别和使用场景	
AMD规范：
1. require.js requirejs.org
2. 全局定义了define函数
3. 全局定义了require函数
4. 依赖JS会自动、异步加载
CommonJS规范：
1. 这是nodejs的模块化规范，现在被广泛应用于前端
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS不会异步加载JS，而是同步一次性加载进来
使用场景：
1. 需要异步加载JS，使用AMD
2. 使用了npm之后建议使用commonjs规范

## 3.3 构建工具	
### 3.3.1 Webpack的基本配置流程	
> [!NOTE]
> 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。
> - 具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

### 3.3.2 Gulp的基本配置流程，与webpack的区别？
> [!NOTE]
> 需要掌握基本的配置流程和打包过程，底层实现原理。

```js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀
 
gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
```
## 3.4 Linux环境基本命令	
> 可参见开发环境下的Linux面试题相关章节。

【JS相关】开发环境

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

3.3.2 Gulp的基本配置流程，与webpack的区别？