gulp 常用方法 任务 插件

执行gulp 任务

gulp taskname (default任务不输入名称亦可：gulp)

var gulp = require("gulp");
gulp.task("a",function(){
    console.log("aaa");
});

gulp 前置任务

gulp.task(当前任务，["前置任务"]，回调函数)

var gulp = require("gulp");
gulp.task("a",function(){
    console.log("aaa");
});
gulp.task("aftera",["a"],function(){
    console.log("after a");
});

gulp src pipe dest 读写文件

• src:读取，gulp.src(globs)，globs是筛选条件，可以是字符串和数组，[patha,pathb...]:读取多个文件
• pipe:管道，a.pipe(b):将a写入到b中
• dest:写入，gulp.dest(path):将文件写入到指定路径

gulp.src(globs).pipe(gulp.dest(path)):读取文件并写入到指定路径

示例：读取src目录下下的所有js文件，写入到dist目录下

var gulp = require("gulp");
gulp.task("dofile", function () {
    gulp.src("./src/**/*.js")
        .pipe(gulp.dest("./dist"));
});

gulp watch 监控

watch方法用于监视文件变化

gulp.watch(url,fn(event){}),
gulp.watch([url1,url2...],fn(event){})

gulp.task("watchfile",function(){
    gulp.watch('./src/js/test.js',function(event){
        console.log(event.type);//added deleted changed
        console.log(event.path);
    });
});

gulp插件：

gulp uglify 压缩文件插件

ugligy:压缩文件，可以将文件中的空格删除

下载插件：npm i gulp-uglify --save -dev

var gulp = require("gulp");
var uglify = require("gulp-uglify");
gulp.task("douglify",function(){
    gulp.src("./src/js/a.js")
    .pipe(uglify())
    .pipe(gulp.dest('./uglify'));
});

压缩前与压缩后效果：

 

gulp rename 重命名

下载插件：npm i gulp-rename --save -dev

 gulp.rename(string)

读取文件，压缩并重命名写入另一个目录：

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
gulp.task("renamefile",function(){
    gulp.src("./src/js/test.js")
    .pipe(uglify())
    .pipe(rename("updateName.js"))
    .pipe(gulp.dest("./rename"));
});

gulp-minify-css 压缩css文件

下载插件：npm i gulp-minify-css --save -dev

将css文件压缩,可不写参数，在管道流中操作

var gulp = require("gulp");
var cssminify = require("gulp-minify-css");
gulp.task("minicss", function () {
    gulp.src("./src/css/*.css")
    .pipe(cssminify())
    .pipe(gulp.dest("./src/css/mini"));
})

 

gulp-minify-html 压缩html文件

下载插件：npm i gulp-minify-html --save -dev

在管道流中操作

var gulp = require("gulp");
var HTMLminify = require("gulp-minify-html");
gulp.task("htmlminify",function(){
    gulp.src("./src/html/*.*")
    .pipe(HTMLminify())
    .pipe(gulp.dest("./src/html/minify"));
});

gulp-concat 合并文件

下载插件：npm i gulp-concat --save -dev

concat(filename)

var gulp = require("gulp");
var concat = require("gulp-concat");
gulp.task("concatfile",()=>{
    gulp.src("./src/js/*.js")
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./src/js/concat'));
});

gulp-sass 解析sass

下载插件：npm i gulp-sass --save -dev

sass():在管道流中操作，将sass解析成css

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sassfile",()=>{
    gulp.src("./src/sass/c.scss")
    .pipe(sass())
    .pipe(gulp.dest("./src/sass"));
});

gulp-imagemin 压缩图片

下载插件：npm i gulp-imagemin --save -dev

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
gulp.task("imgmin",()=>{
    gulp.src("./src/images/*.*")
    .pipe(imagemin())
    .pipe(gulp.dest('./src/images/min'));
});

 自动加载插件：