- 初始化npm的配置文件。
请提前安装好node。
# 到项目的根目录下执行如下命令
$ npm init -y
命令执行完后,会在 项目根目录下生产package.json文件,此文件为npm的配置文件。
- 安装我们依赖的gulp插件
# 先全局安装gulp
$ npm i -g gulp
# 安装gulp依赖
$ npm i -D gulp
- 安装gulp-sass依赖
# 安装gulp-sass
$ npm i gulp-sass -D
# 安装gulp-sass ,依赖了node-sass,此包比较大,从github网站下载。可能会失败
# 怎么解决?http://lzw.me/a/node-sass-install-helper.html
- 全局安装live-server帮我们启动web服务
# 全局安装live-server
$ npm i -g live-server
# 进入我们的项目录
# 启动web服务。
$ live-server
- chrome浏览器远程真机调试
首先保障以下几点:
- 手机必须打开usb调试功能(android)
- 手机必须安装android的chrome浏览器app
- 手机要通过usb链接到电脑。
用chrome可以进行远程链接调试。
第一步:打开开发人员工具
第二步:点击菜单栏的更多工具按钮
第三步:选择远程device功能。
第三步:选择我们的手机设备,然后进行点inspect按钮
- 安装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