npm gulp等相关配置

时间:2021-04-18 04:44:12
  1. 初始化npm的配置文件。

请提前安装好node。

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

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

  1. 安装我们依赖的gulp插件
# 先全局安装gulp
$ npm i -g gulp
# 安装gulp依赖
$ npm i -D gulp
  1. 安装gulp-sass依赖
# 安装gulp-sass
$ npm i gulp-sass -D

# 安装gulp-sass  ,依赖了node-sass,此包比较大,从github网站下载。可能会失败
# 怎么解决?http://lzw.me/a/node-sass-install-helper.html
  1. 全局安装live-server帮我们启动web服务
# 全局安装live-server
$ npm i -g live-server
# 进入我们的项目录
# 启动web服务。
$ live-server
  1. chrome浏览器远程真机调试
    首先保障以下几点:
  • 手机必须打开usb调试功能(android)
  • 手机必须安装android的chrome浏览器app
  • 手机要通过usb链接到电脑。

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

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

  1. 安装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