git | nodeJs | gulp | requireJs

Posted on | Updated on | In , | comments: | Visitors:
Words count in article: 1.3k | Reading time ≈ 5

GIT

全局配置用户名和邮箱

1
2
git config --global user.name '平台设置用户名'
git config --global user.email '平台绑定邮箱名'

配置密钥对

1
ssh-keygen

查看git公钥

1
2
3
1.cd ~/.ssh
2.ls
3.cat id_rsa.pub

进入项目目录执行初始化git本地仓库

1
git init

赋值线上仓库的SSH地址

1
git remote add origin [线上仓库的ssh地址]

经过三步命令把代码放到本地仓库以及线上

1
2
3
git add -A   （把所有代码添加到本地暂存区）	
git commit -m '这次提交做的更新或者修改'  （把代码从暂存区取提交到本地仓库）
git push origin master  （把代码从本地仓库推送到线上）

附录

1
2
3
4
5
6
git status  查看当前仓库文件状态
git pull  
git clone [线上地址]  可以把线上的仓库代码克隆到本地
git log  查看提交日志，也可以看到每一个提交的版本号
it reset --hard [要回退的版本号]  版本回退，可以在各个版本之间来回穿梭
git diff [文件名] 可以查看这次修改内容

分支管理

当在做一个不确定的新功能的时候，同时也在改bug的时候，采用分支管理

1
2
3
4
git branch				  #查看分支  master 主分支
git checkout -b 分支名     #创建分支,并切换到分支
git merge 分支名			#合并分支
git push origin 分支名		#把代码上传到远程分支，有这个分支的时候直接push，没有的时候就创建。

###常见linux命令

1
2
3
4
cd [目录名称] 进入目录
touch [文件名] 新建文件
ls  查看当前目录下的所有文件和文件夹
rm [文件名] 删除一个文件

Node.js以及gulp

查看版本

1
2
node -v
npm -v  （npm：node package mananger --node包管理工具）

全局安装 gulp

1
npm install gulp@3 -g   （@3是第3版本。mac：前面添加sudo）

在项目目录下生成 package.json 文件

1
npm init -y

在项目目录中本地安装 gulp

1
2
3
npm install gulp@3 --save-dev  
(本地安装成功后，会生成 node_modules 文件夹.ps:此处安装的gulp版本须和全局安装的是同一个版本.
 mac：前面添加sudo）

在项目目录中本地安装 gulp 插件(https://www.npmjs.com)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
**压缩CSS：gulp-clean-css**
npm install gulp-clean-css --save-dev   （mac：前面添加sudo）
**压缩JS：gulp-uglify**
npm install --save-dev gulp-uglify    （mac：前面添加sudo）
**压缩Html：gulp-htmlmin**
npm install --save-dev gulp-htmlmin  （mac：前面添加sudo）
**将ES6转换为ES5：gulp-babel**
npm install --save-dev gulp-babel @babel/core @babel/preset-env  （mac：前面添加sudo）
**服务器：gulp-connect**
npm install --save-dev gulp-connect  （mac：前面添加sudo）
**文件合并**
npm install --save-dev gulp-concat   （mac：前面添加sudo）
**sass转css  gulp-sass**
npm install node-sass gulp-sass --save-dev （mac也不用加sudo）

启动gulp

1
gulp   （mac：sudo gulp）

RequireJs

什么是RequireJs?

RequireJS 是一个JavaScript模块加载器。

为什么使用RequireJS?

模块化：模块化就是将不同功能的函数封装起来，并提供使用接口，他们彼此之间互不影响。
不会阻塞页面：RequireJS，会在相关的js加载后执行回调函数，这个过程是异步的，所以它不会阻塞页面。

require.config( )

require.config()

可以对模块的加载行为进行自定义，并把模块变为全局可使用的。require.config()就写在主模块的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径（==不要加后缀==）

1
2
3
4
5
6
7
8
require.config({
    basaUrl:"/",
    paths:{
        'jquery': 'libs/jQuery/jquery-3.4.1.min',	//不要加后缀
        'header': 'js/modules/header',
        'bannerPlay': 'js/modules/bannerPlay'
    }
})

require( [ ] ,function( ){ } ) -引用模块

require.js的核心之一，它接受两个参数。第一个参数是一个数组，表示所依赖的模块;第二个参数是一个回调函数，当前面指定的模块加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
既然第一个参数是数组，里面就可以有多个值。

1
2
3
4
5
6
require(['./config'], () => {
     require(['header', 'bannerPlay'], () => {

     })
 })
PS:js里引用此模块的时候，需要嵌套引用

define([],function(){})-定义模块

1
2
3
4
5
6
7
8
9
10
11
12
define(['jquery'], () => {	//第一个参数是需要依赖的模块，这儿是数组，即可以为多个。
    class Header {
        constructor() {
            this.load()
        }
        load(){
            $('header').load('/html/modules/header.html')
        }
    }
    return new Header();	//必须return
});
PS: define的回调函数需要有 return 语句返回模块对象，这样 define 定义的模块才能被其他模块引用；require 的回调函数不需要 return 语句。

shim

通过 require 加载的模块一般都需要符合 AMD 规范，即使用 define 来申明模块。

但是部分时候需要加载非 AMD 规范的 js（如jQuery的一些插件），这时候就需要用到另一个功能：shim。

1
2
3
4
5
6
7
8
9
10
11
12
13
require.config({
    basaUrl:"/",
    paths:{
        'jquery': 'libs/jQuery/jquery-3.4.1.min',	//不要加后缀
        'header': 'js/modules/header',
        'bannerPlay': 'js/modules/bannerPlay'
    }
    shim: {
    'carousel': {
        deps: ['jquery']
    }
}
})

template

1
2
3
4
5
<script type="text/html">
    {{each list item}}
    	<li>{{item}}</li>
    {{/each}}
</script>
0%