Hexo

gulp是什么呢

Gulp 是基于 NodeJS 的前端自动化构建工具，在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务，在操作上使用了 NodeJS 中的 stream (流)，通过 pipe() 方法导入到指定的地方，将前一级的输出，作为后一级的输入，不再需要进行频繁的 IO 操作。

使用gulp前的操作

首先一定基于nodejs下的，建立一个cnpm install gulp-cli -g建立全局的cli,安装cnpm install gulp –save-dev开发时依赖，可以下载运行时依赖如cnpm install jquery –save。

先来一个代码gulp4的举例：

var gulp = require("gulp");
var connect = require("gulp-connect");
var watch = require("gulp-watch");
var less = require("gulp-less");

//转移html到dist文件夹下
gulp.task("html",function(){ 
    gulp.src("./src/index.html")
        // 重新加载浏览器，不需要手动刷新浏览器
        .pipe(connect.reload())
        .pipe(gulp.dest("./dist"))
})
//监听任务，这样保存的话会直接同步保存到dist下。
gulp.task("watch",function(){
    watch("./src/index.html",gulp.series('html'))
    watch("./src/less/*.less",gulp.series('less'))
    watch("./src/js/*.js",gulp.series('js'));
})
//服务器开启任务
gulp.task("server",function(){
    connect.server({   
        root : './dist',
        // 热启操作
        livereload : true
    });
})
//把less转换成css
gulp.task("less",function(){
    gulp.src("./src/less/*.less")
        .pipe(connect.reload())
        .pipe(less())
        .pipe(gulp.dest("./dist/css"));
})
//把src的js文件夹放到dist文件夹下
gulp.task("js",function(){
    gulp.src("./src/js/*.js")
        .pipe(connect.reload())
        .pipe(gulp.dest("./dist/js"))
})
gulp.task('default',gulp.series(gulp.parallel('html','watch','server','less','js')));

gulp4相对于gulp3的最大不同之处

Gulp 4最大的变化就是你不能像以前那样传递一个依赖任务列表。不要用Gulp3的方式指定依赖任务，你需要使用gulp.series和gulp.parallel，因为gulp任务现在只有两个参数。

1 2	gulp.series：按照顺序执行 gulp.paralle：可以并行计算