gulp

概念:
+ 前端自动化流式构建工具
+ 我们可以使用gulp编写一些机械化的任务,即告诉它我们想要做什么,当需要做这件事情的时候,执行任务即可.
+ 有效提高开发效率 改善开发体验
- 说明
+ gulp这个工具依赖node环境 所以在使用gulp之前需要安装node环境
+ 就像我们使用bootstrap要先引入jQuery是一个道理
+ 编写gulp任务使用JS语法,所以它相当的简单
- 下载gulp
+ npm install gulp
+ 在项目的根目录运行这个命令,会自动生成一个node_modules文件夹 gulp会被下载到这个文件夹中.
+ node_modules文件夹中除了gulp以外,还会多出很多文件,这些都是gulp所要依赖的文件.具体依赖了哪些不需要开发人员关注.gulp本身会自动管理

-使用gulp编写任务
+ gulp要求我们在项目的根目录下新建一个gulpfile.js文件,这个文件是专门用来编写gulp任务的.
+ 就像使用angularjs框架需要引包一样,要使用gulp也需要引包
```javascript
// require('包名') 引包
var gulp = require('gulp');
// gulp变量是对象类型
// 我们编写任务 处理任务需要用到gulp对象下面的方法

gulp中提供的方法:
+ gulp.src() 获取任务要处理的文件
+ gulp.dest() 输出文件
+ gulp.task() 建立gulp任务
+ gulp.watch() 监控文件的变化
+ gulp本身提供的方法不多,大多数的任务都是由插件完成的

- [gulp插件地址](https://gulpjs.com/plugins/)
+ 图片压缩 [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)
+ CSS压缩 [gulp-clean-css](https://github.com/scniro/gulp-clean-css)
+ JS压缩 [gulp-uglify](https://github.com/terinjokes/gulp-uglify)
+ HTML压缩 [gulp-htmlmin](https://github.com/jonschlinkert/gulp-htmlmin)
+ 文件合并 [gulp-concat](https://github.com/contra/gulp-concat)
+ LESS转换CSS [gulp-less](https://www.npmjs.com/package/gulp-less)
+ es6转es5 [gulp-babel](https://www.npmjs.com/package/gulp-babel/)
+ 静态资源服务 [gulp-browser-sync](http://www.browsersync.cn/docs/gulp/)

原文地址:https://www.cnblogs.com/fanjuncheng666/p/9469436.html