关于gulp的应用

Posted 2020-09-01

//首先先安装应用
var gulp = require("gulp");
var less = require("gulp-less");
var scss = require("gulp-sass");
var connect = require("gulp-connect");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var minifyCss = require("gulp-minify-css"); 
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
//创建服务
gulp.task("server",function(){
    connect.server({
        root:"dist",
        livereload:true
    })
});

gulp.task("copy-index",function(){
    gulp.src("index.html")
        .pipe(gulp.dest("dist"))
        .pipe(connect.reload());//重置
});

gulp.task("copy-libs",function(){
    gulp.src("libs/**/*")
        .pipe(gulp.dest("dist/libs"))
        .pipe(connect.reload());
})
gulp.task("copy-html",function(){
    gulp.src("html/*.html")
        .pipe(gulp.dest("dist/html"))
        .pipe(connect.reload());
})
gulp.task("copy-img",function(){
    gulp.src("img/**/*")
        .pipe(gulp.dest("dist/img"))
        .pipe(connect.reload());
})
gulp.task("myJs",function(){
    gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js"))
        .pipe(rename("bundle.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
        .pipe(connect.reload());
})
gulp.task("myCss",function(){
    gulp.src("less/*.less")
        .pipe(concat("layout.less"))
        .pipe(less())
        .pipe(gulp.dest("dist/css"))
        .pipe(rename("layout.min.css"))
        .pipe(minifyCss())
        .pipe(gulp.dest("dist/css"))
        .pipe(connect.reload());
})
//监听
gulp.task("build",["copy-index","copy-libs","copy-html","copy-img","myJs","myCss"],function(){
    console.log("ok")
})
gulp.task("watch",function(){
    gulp.watch("index.html",["copy-index"]);
    gulp.watch("html/*.html",["copy-html"]);
    gulp.watch("libs/**/*",["copy-libs"]);
    gulp.watch("img/**/*",["copy-img"]);
    gulp.watch("js/**/*",["myJs"]);
    gulp.watch("less/**/*",["myCss"]);
})

gulp.task("default",["build","watch","server"]);