Gulp-前端自动化构建工具

gulp基于node,自动化构建工具增强前端开发工作流程
一些常见的、重复的任务，例如：网页自动刷新、css预处理、代码检测、压缩图片、等，只需要简单的命令就能全部完成。使用它可以简化工作，提高开发效率。

安装环境

1. 安装node
   下载地址: http://nodejs.cn/download/
   
   node安装包下载
   
   根据系统选择,建议windows系统选择64位.msi
   安装成功后,WIN+R 运行 CMD,输入node -v检查是否安装成功,出现版本号,表示安装成功
   node安装后自带npm,顺便输入npm -v,检查npm是否一并安装成功
2. 全局安装gulp
   命令: npm install -g gulp,
   检查是否成功gulp -v

新建项目

传统开发项目目录

1. 初始化项目
   npm init -y生成package.json配置文件
2. 本地安装gulp
   gulp全局安装后,还需要安装到此项目的目录下
   npm i -D gulp
3. 安装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"

4. 编写gulpfile
   gulp自动化任务,监听各种文件和操作,用对应的插件处理
5. 运行
   一切都准备好后,执行命令gulp,当看到命令行打印成功信息后,便可以开始开发了,浏览器地址输入localhost:8080访问文件