gulp 搭建静态服务器

无人久伴 提交于 2020-02-26 12:49:37

步骤:

安装依赖:npm i browser-sync --save-dev

导入browser-sync,通过create创建

设置Sass和Js任务,将其压缩重命名并引入页面,任务结束时reload服务

设置默认任务,此任务负责,初始化服务器,监视setJs和setCss的变化

var gulp = require("gulp");
var browser = require("browser-sync").create();
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var uglify = require("gulp-uglify");

gulp.task("setJs",()=>{
    gulp.src("./src/js/*.js")
    .pipe(concat("c.js"))
    .pipe(uglify())
    .pipe(rename("c.min.js"))
    .pipe(gulp.dest("./dist"))
    .on("end",browser.reload);
});

gulp.task("setSass",()=>{
    gulp.src("./src/sass/*.scss")
    .pipe(sass())
    .pipe(rename("main.min.css"))
    .pipe(minifyCss())
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
});

gulp.task("default",()=>{
    browser.init({
        server:'./',
        port:4011
    });
    gulp.watch("./src/sass/*.scss",["setSass"]);
    gulp.watch("./src/js/*.js",["setJs"]);
});

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!