gulp和require.js

全局安装 gulp

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

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

npm init -y

在项目目录中本地安装 gulp

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

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

  **压缩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

gulp   （mac：sudo gulp）

RequireJs

什么是RequireJs?

RequireJS 是一个JavaScript模块加载器。

为什么使用RequireJS?

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

require.config( )

require.config()

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

require.config({
    basaUrl:"/",
    paths:{
        'jquery': 'libs/jQuery/jquery-3.4.1.min',	//不要加后缀
        'header': 'js/modules/header',
        'bannerPlay': 'js/modules/bannerPlay'
    }
})

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

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

require(['./config'], () => {
     require(['header', 'bannerPlay'], () => {

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

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

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。

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

<script type="text/html">
    {{each list item}}
    	<li>{{item}}</li>
    {{/each}}
</script>