# lagou-web-app

**Repository Path**: seebin/lg-web-app

## Basic Information

- **Project Name**: lagou-web-app
- **Description**: 仿拉勾网-测试应用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: task
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2017-04-18
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## npm 包管理工具

> 什么是npm？npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。

### 一、安装包

npm 的安装方法就不说了，安装一个npm的包通过如下命令：

> npm install package-name   

这时该目录下会多了 node_modules 并且里面多了下载的包名文件夹。
如果需要指定版本下载，只需要在包后面添加@版本号就可以了，例：

> npm install angular@1.3.0

### 二、用 package.json 文件管理包

我们的包一般是放到项目文件夹中的，那如何管理我们下载的包呢？使用 package.json 文件。首先：

> npm init

使用上方命令初始化一个文件，之后会出现需要添加的文件内容配置信息，可以先都回车默认创建一个。创建之后可以在项目文件夹跟目录看到 package.json 文件。

那如何在安装包的时候将依赖的包直接配置在 package.json 里面，比如：

> npm install --save angular

这样在配置文件中会多个 dependencies 键值对字段，里面已经显示出包的版本。

### 三、 package.json 的内容属性

> 这里选取了该配置是文件初始化的一些属性，并不做具体的使用规则，主要用来说明是干嘛用的。具体怎么用百度上面太多了。这里只介绍默认创建的该文件的属性都是干什么的。

* name 与 version

    name 与 version 是两个必须要有的属性，否则模块无法被安装。模块中内容变更的同时，模块版本也应该一起变化。

* description

    一个描述，方便别人了解你的模块作用，搜索的时候也有用。

* keywords

    一个字符串数组，方便别人搜索到本模块。

* main

    main属性指定了程序的主入口文件，应该指向模块根目录下的一个文件。

* directories

    目前这个配置可能没有什么用，默认的话里面可能 test 字段，用来指向 test 目录

* scripts

    scripts属性是一个对象，里边指定了项目的生命周期个各个环节需要执行的命令。key是生命周期中的事件，value是要执行的命令。

* author

    看单词也知道是干嘛呢。就是一个码农

* license

    为模块制定一个协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制。可以在https://spdx.org/licenses/这个地址查阅协议列表 。

* dependencies

    是一个对象，配置模块依赖的模块列表，key是模块名称，value是版本范围。也就是上面说的安装时使用 --save 会自动将包信息添加到这。

* private

    如果这个属性被设置为true，npm将拒绝发布它，这是为了防止一个私有模块被无意间发布出去。当然如果配置文件未设置 repository 属性，安装包时会出现提示信息，则加上这个属性，便不会出现提示。


## bower 依赖管理工具

* 常用命令：bower init 、 bower install 、 bower uninstall
* 配置文件：.bowerrc（用来修改安装目录） 、 bower.json（用来管理第三方依赖）

#### bower 的使用

首先全局安装 bower

> npm install -g bower

然后进入我们的项目文件夹下，初始化 bower 的配置文件

> bower init

默认完成后，安装一个 angular 测试一下，包后面加上 # 版本号 可下载制定版本的包

> bower install --save angular#1.3.0

之前说到 .bowerrc 配置文件那么 window 系统如何创建该配置文件呢？  
命令行下输入：

> null>.bowerrc

这个 .bowerrc 是路径配置文件，只需要在里面写入路径就可以，每次 bower 安装都会装到设定的目录里面，写入内容如下：

    {
        'directory': 'lib'
    }


## gulp自动化构建工具

自动化构建工具  
源码合并压缩：合并为了减少http请求，压缩为了节省带宽  
优点：基于流、任务化  
常用API：src（读取文件）、dest（生成文件）、watch（监控文件）、task（定时任务）、pipe（流的方式处理文件）

### 一、安装gulp

首先需要全局安装gulp

> npm install -g gulp

其次在项目文件夹作为开发依赖安装 gulp 并配置到 package.json 文件中

> npm install --save-dev gulp

然后依次在项目文件夹安装 gulp 插件

* gulp-clean
* gulp-concat
* gulp-connect
* gulp-cssmin
* gulp-imagemin
* gulp-scss
* gulp-load-plugins
* gulp-uglify
* open

小技巧：一条命令全部安装
> npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-scss gulp-load-plugins gulp-uglify open

## 二、编写配置文件

```
任务列表
1. lib
2. html
3. json
4. css
5. js
6. image
7. clean
8. reload
9. watch
```
* 定义全局模块
* 在声明定义路径的全局变量
* 编写任务
* 执行编写的任务