前端之构建工具-gulp

1.概念：
gulp 是基于流的自动化构建工具，可以做打包，合并。优点：提高工作效率,gulp 有类似于linux,unix 管道的概念。

2.gulp与grunt的区别
gulp相比grunt 更简单，gulp并不需要CLI,gulp 是基于nodejs stream 并通过pipe管道导入到指定位置，而grunt是把任务结果写在临时文件中并无限循环下去，在效率上gulp更高。
注：上一个的输出是下一个的输入
eg: var gulp=require('gulp');
var uglify=require("gulp-uglify");//压缩
var concat=require("gulp-concat");//合并
//var path={
//  scripts:["js/index.js","js/main.js"]
//}
gulp.task("default",function(){
gulp.src("js/*.js")//来源文件 index,main
.pipe(uglify())//压缩
.pipe(concat("all.min.js"))//合并
.pipe(gulp.dest("build"));//生成文件位置
})

3.gulp使用步骤：
3.1 npm install --global gulp 全局安装gulp
3.2 npm install --save-dev gulp 为项目安装依赖

3.3 var gulp = require('gulp'); 新建gulpfile.js文件
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
3.4 gulp 运行gulp

4.gulpAPI
4.1
gulp.src(globs[, options]);获取操作文件流，globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，多种匹配模式使用数组
例如：gulp.src(['js/*.js','css/*.css','*.html'])；
4.2
gulp.dest(path[,options]) 写文件，path为写入文件的路经
gulp.task(name[, deps], fn) 定义任务 name为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
gulp.watch(glob[, opts], tasks) 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等, glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组

5.gulp 常用插件
5.1 gulp-load-plugins 自动加载  安装：npm install --save-dev gulp-load-plugins
5.2 gulp-rename 重命名 安装：npm install --save-dev gulp-rename
5.3.gulp-uglify js文件压缩 安装：npm install --save-dev gulp-uglify
5.4 gulp-minify-css css压缩  安装：npm install --save-dev  gulp-minify-css
5.5 gulp-minify-html文件压缩  安装：npm install --save-dev gulp-minify-html
5.6 gulp-jshint js检查  安装：npm install --save-dev gulp-jshint
5.7 gulp-concat  代码合并 安装：npm install --save-dev  gulp-concat
5.8 gulp-less 解析less  安装：npm install --save-dev gulp-less
5.9 gulp-sass 解析sass 安装：npm install --save-dev gulp-sass
5.10 gulp-imagemin 压缩图片 安装：npm install --save-dev gulp-imagemin
5.11  gulp-livereload 自动刷新 安装：npm install --save-dev gulp-livereload

gulp.task()——新建任务
gulp.src()——获取文件源地址
gulp.dest()——文件输出地址
gulp.run()——运行任务
gulp.watch()——监听文件修改
以上为gulp常用方法