gulp基于node,自动化构建工具增强前端开发工作流程
一些常见的、重复的任务，例如：网页自动刷新、css预处理、代码检测、压缩图片、等，只需要简单的命令就能全部完成。使用它可以简化工作，提高开发效率。
安装环境
- 安装node
下载地址: http://nodejs.cn/download/
node安装包下载
根据系统选择,建议windows系统选择64位.msi
安装成功后,WIN+R 运行 CMD,输入node -v检查是否安装成功,出现版本号,表示安装成功
node安装后自带npm,顺便输入npm -v,检查npm是否一并安装成功 - 全局安装gulp
命令:npm install -g gulp,
检查是否成功gulp -v
新建项目
传统开发项目目录
- 初始化项目
npm init -y生成package.json配置文件 - 本地安装gulp
gulp全局安装后,还需要安装到此项目的目录下
npm i -D gulp - 安装gulp常用插件
将多个插件名用空格连接可以一次合并安装多个插件:npm i -D 插件名1 插件名2 插件名3...
"browserify": "^16.2.2",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^3.6.0",
"gulp-connect": "^5.0.0",
"gulp-csso": "^3.0.1",
"gulp-file-include": "^1.1.0",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.4.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.1.0",
"jquery": "^3.3.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.11.0"
- 编写gulpfile
gulp自动化任务,监听各种文件和操作,用对应的插件处理 - 运行
一切都准备好后,执行命令gulp,当看到命令行打印成功信息后,便可以开始开发了,浏览器地址输入localhost:8080访问文件
