gulp的配置案例

const gulp = require(“gulp”),
connect = require(“gulp-connect”),
sass = require(“gulp-sass”);

//启动服务器
gulp.task(“connect”,function(){
connect.server({
root:”dist”,
livereload:true//文件修改后浏览器会自动刷新
})
});

//让html页面可以重新加载，但是只会做一次
//复制html文件到dist目录中，让html页面修改后能够重新加载
gulp.task(“html”,function(){
gulp.src(“src/*/.html”)
.pipe(gulp.dest(“dist”))//生成的目录
.pipe(connect.reload())
})

//复制js文件到dist目录中，让js修改后能够重新加载
gulp.task(“js”,function(){
gulp.src(“src/js/*/.js”)
.pipe(gulp.dest(“dist/js”))//生成的目录
.pipe(connect.reload())
})

//复制lib目录到dist下
gulp.task(“copy-lib”,function(){
gulp.src(“src/lib/*/.*”)
.pipe(gulp.dest(“dist/lib”))
});

//复制图片到dist下
gulp.task(“copy-img”,function(){
gulp.src(“src/img/*/.*”)
.pipe(gulp.dest(“dist/img”))
});

//复制假数据到dist下
gulp.task(“copy-mock”,function(){
gulp.src(“src/mock/*/.*”)
.pipe(gulp.dest(“dist/mock”))
});

gulp.task(“copy-font”,function(){
gulp.src(“src/font/*/.*”)
.pipe(gulp.dest(“dist/font”))
});

//整合
gulp.task(“copy”,[“copy-lib”,”copy-img”,”copy-font”,”copy-mock”]);

//编译.scss文件为.css文件
gulp.task(“sass”,function(){
gulp.src(“src/sass/*.scss”)
.pipe(sass({outputStyle:”compressed”}))
.pipe(gulp.dest(“dist/css”))
.pipe(connect.reload());
});

//服务器监听修改
gulp.task(“watch”,function(){
gulp.watch(“src/sass/*.scss”,[“sass”]);
gulp.watch(“src/*/.html”,[“html”]);
gulp.watch(“src/js/*/.js”,[“js”]);
})

gulp.task(“default”,[“html”,”js”,”sass”,”copy”,”connect”,”watch”])