npm gulp等相关配置

1. 初始化npm的配置文件。

请提前安装好node。

# 到项目的根目录下执行如下命令
$ npm init -y

命令执行完后，会在 项目根目录下生产package.json文件，此文件为npm的配置文件。

2. 安装我们依赖的gulp插件

# 先全局安装gulp
$ npm i -g gulp
# 安装gulp依赖
$ npm i -D gulp

3. 安装gulp-sass依赖

# 安装gulp-sass
$ npm i gulp-sass -D

# 安装gulp-sass  ，依赖了node-sass，此包比较大，从github网站下载。可能会失败
# 怎么解决？http://lzw.me/a/node-sass-install-helper.html

4. 全局安装live-server帮我们启动web服务

# 全局安装live-server
$ npm i -g live-server
# 进入我们的项目录
# 启动web服务。
$ live-server

5. chrome浏览器远程真机调试
   首先保障以下几点：

• 手机必须打开usb调试功能（android）
• 手机必须安装android的chrome浏览器app
• 手机要通过usb链接到电脑。

用chrome可以进行远程链接调试。

第一步：打开开发人员工具
第二步：点击菜单栏的更多工具按钮
第三步：选择远程device功能。
第三步：选择我们的手机设备，然后进行点inspect按钮

6. 安装gulp的相关自动化流程工具

# css文件压缩
$ npm i gulp-minify-css -D

# js文件压缩
$ npm i gulp-uglify -D

# image文件压缩
$ npm i gulp-imagemin -D

# gulp-concat实现文件合并
$ npm i -D gulp-concat

# gulp-rename 重命名
$ npm i gulp-rename -D

# 安装文件夹清理
$ npm i gulp-clean -D

# 更改版本号
$ npm i gulp-rev-collector -D

# 安装sourcemap
$ npm i gulp-sourcemaps -D

# html压缩
$ npm install -D gulp-minify-html 

# js压缩
$ npm install -D gulp-uglify