yarn依赖管理工具，和fis3构建工具 gulp详细用法

看视频所了解到的，正在进行摸索。

参考：https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒，唯一有一点，页面随时刷新的目前还没实现，不知道是什么原因。

跟着例子敲的

var gulp = require('gulp');
var less = require('gulp-less');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');

var imagemin = require('gulp-imagemin');
  var pngquant=require('imagemin-pngquant');

　　//图片压缩
　　gulp.task('img', function () {
　　　　gulp.src('img/*')
　　　　.pipe(imagemin({
　　　　progressive: true,
　　　　use: [pngquant()] //使用pngquant来压缩png图片
　　　　}))
　　　　.pipe(gulp.dest('dist/img'));
　　});

//gulp.task('default',['one','two','three'],function(){ //执行默认任务
//    console.log('Hello world')  //hello world 会在任务one two three三个任务执行完之后才执行
//})
/*
gulp.src("a.less")
    .pipe(gulp.dest('dist'));
 
gulp.task('one',function(){ //gulp.task(name[, deps], fn)
    console.log('one is done')
})
gulp.task('two',function(){ //gulp.task(name[, deps], fn)
    console.log('two is done')
})
 
gulp.task('three',function(){ //gulp.task(name[, deps], fn)
    console.log('three is done')
})
 
gulp.task('default',['first','second'],function(){ //执行默认任务
    console.log('Hello world')  //此时的输出顺序为second Hello world 最后first two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
})
gulp.task('first',function(){
    setTimeout(function(){  //这是一个异步任务
        console.log('first')
    },1000)
})
gulp.task('second',['first'],function(){
    console.log('second')
})
 
gulp.task('default',['first','second'],function(){ //执行默认任务
    console.log('Hello world')  //此时的输出顺序为second Hello world 最后first two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
})
gulp.task('first',function(cb){
    setTimeout(function(){  //这是一个异步任务
        console.log('first')
        cb();//执行回调，表示这个异步任务已经完成
    },1000)
})
//这时second任务会在first任务中的异步操作完成后再执行
gulp.task('second',['first'],function(){
    console.log('second')
})
 
//gulp watch监听
gulp.task('default',function(){ //执行默认任务
    gulp.src("a.less")
    .pipe(gulp.dest('dist'));
})
gulp.watch('*.less',function(event){
    console.log(event.type)
    console.log(event.path)
})
*/
//gulp.task('html', function () {
//  gulp.src('index.html')
//  .pipe(livereload())
//});
 
gulp.task('less', function () {  //less方法
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload())
});
/*
gulp.task('sass', function () {  //sass方法
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/sass'))
});
*/
gulp.task('watch',function(file){  //watch方法监听less编译
      livereload.listen(); //要在这里调用listen()方法
      gulp.watch('less/*.less', ['less']); //监听的文件，方法
});
/*总结
 * 1 gulp.src引入文件
 * 2 .pipe()转成流的方式
 * 3 gulp.dest 输出
 * 4 gulp.task 任务
 * 5 gulp.watch 监听
*/