gulp4.0：自动化构建工具

1.全局安装  npm install gulp -g
2.局部安装  npm install gulp --save-dev

3.相关插件：
    gulp-concat：合并文件（css/js）
    gulp-uglify：压缩js文件
    gulp-rename：文件重命名
    gulp-less：编译less
    gulp-clean-css：压缩css
    gulp-livereload：实时自动编译刷新                                                                                                                                                    gulp-connect：热加载

3-1.下载插件：npm install gulp-concat gulp-uglify gulp-rename --save-dev
         npm install gulp-less gulp-clean-css --save-dev 
         npm install gulp-htmlmin --save-dev
         npm install gulp-livereload --save-dev
         npm install gulp-livereload --save-dev                                                                                                                                               npm install gulp-connect --save-dev

4.重要API：
    gulp.src(globs[, options]) 找到指定路径的所有文件，返回文件流对象，读取文件。
    gulp.dest(path[, options]) 指向指定的所有文件，用于输出文件。
    gulp.task(name[, deps], fn) 定义一个任务。
    gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]) 监事文件变化。

5. 合并必须带名字，压缩再rename。

6. gulp.series  /4.0 依赖    gulp.parallel /4.0  多依赖嵌套。

7.自动执行：gulp-livereload，保存后自动执行gulp命令。

gulp.task('watch',function(){
    gulp.watch('src/less/*.less',gulp.series('less'))
    gulp.watch('dist/*.css',gulp.series('css'))
    gulp.watch('index.html',gulp.series('html'))
})

     需在每一个任务后面都铺设管道  .pipe(livereload())；

8.热加载：gulp-connect，浏览器自动刷新。

gulp.task('server',function(){
	connect.server({
		livereload:true,
		port:999
	})
})

     需在每个任务后铺设 .pipe(connect.reload()) 

9 .series里的任务是顺序执行的，parallel里的任务是同时执行的。

gulp.task('default', gulp.series('clean', 'compass', gulp.parallel('image', 'style', 'html'), 'ftp'));  

var gulp=require('gulp');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var rename=require('gulp-rename');
var less=require('gulp-less');
var cleanCss=require('gulp-clean-css');
var htmlMin=require('gulp-htmlmin');
var livereload=require('gulp-livereload');


//注册合并压缩js任务
gulp.task('js',function(){
	return gulp.src('src/js/*.js')  //找到文件，放入gulp内存
	.pipe(concat('build.js'))
	.pipe(gulp.dest('dist'))
	.pipe(uglify())
	.pipe(rename({suffix:'.min'}))
	.pipe(gulp.dest('dist'))

});
//注册转换less的任务
gulp.task('less',function(){
	return gulp.src('src/less/*.less')
	.pipe(less())
	.pipe(gulp.dest('src/css'))
});
//合并压缩css文件
gulp.task('css',function(){
	return gulp.src('src/css/*.css')
	.pipe(concat('build.css'))
	.pipe(gulp.dest('dist'))
	.pipe(cleanCss())
	.pipe(rename('build.min.css'))
	.pipe(gulp.dest('dist'))
	.pipe(livereload())//实时刷新
});
//压缩html文件
gulp.task('html',function(){
	return gulp.src('index.html')
	.pipe(htmlMin({collapseWhitespace:true}))
	.pipe(gulp.dest('dist'))
})
//注册默认任务
gulp.task('default',["css"]);

//注册监视任务(半自动)
gulp.task('watch',function(){
	//开启监听
	livereload.listen();
	//确定监听目标并绑定任务
	gulp.watch('src/css/*.css',['css'])
})

//注册监视任务(全自动)