步骤:

安装依赖: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"]);
});

gulp 搭建静态服务器的更多相关文章

  1. 利用gulp搭建本地服务器,并能模拟ajax

    工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...

  2. Node.js学习笔记 01 搭建静态服务器

    希望这篇文章能解决你这样一个问题:“我现在已经了解了一些Node.Js基本概念了,怎么搭一台静态服务器呢?” 请参考一下博主的前两篇文章: 完全面向于初学者的Node.js指南 Node.Js的Mod ...

  3. 利用gulp搭建简单服务器,gulp标准版

    var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀 rename = requir ...

  4. Node.js搭建静态服务器

    let http = require('http'); let url = require('url'); let fs = require('fs'); let path = require('pa ...

  5. 手写koa-static源码,深入理解静态服务器原理

    这篇文章继续前面的Koa源码系列,这个系列已经有两篇文章了: 第一篇讲解了Koa的核心架构和源码:手写Koa.js源码 第二篇讲解了@koa/router的架构和源码:手写@koa/router源码 ...

  6. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  7. 自己搭建CDN服务器静态内容加速-LuManager CDN使用教程

    为什么要自己来搭建一个CDN服务器实现网站访问加速?一是免费CDN服务稳定性和加速效果都不怎么行:二是用国内的付费CDN服务价格贵得要死,一般的草根站长无法承受:三是最现实的问题国内的CDN要求域名B ...

  8. Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器

    自从实习以来,我体验了由一个人编程再到多人协作编程的转换.同时也接触了很多新鲜事物,学到了很多东西.工作时,常常需要多个人协同测试一张H5页面(PC.手机.平板等跨设备测试),也会经常把页面给PM或老 ...

  9. 腾讯云,搭建Http静态服务器环境

    任务时间:15min ~ 30min 搭建静态网站,首先需要部署环境.下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务. 安装 Nginx 在 CentOS 上,可直接使 ...

随机推荐

  1. 【C语言】猴子吃桃问题

    题目: 猴子第一天吃了若干个桃子,当即吃了一半,还不解馋,又多吃了一个: 第二天,吃剩下的桃子的一半,还不过瘾,又多吃了一个:以后每天都吃前一天剩下的一半多一个,到第10天想再吃时,只剩下一个桃子了. ...

  2. VTK坐标系统及视图分割

    计算机图像学里广泛应用的坐标系统有四种,分别是:模型坐标系统(model),世界坐标系统(world),视图坐标系统(view)和显示坐标系统(display). 模型坐标系统就是定义模型时所用的坐标 ...

  3. 二分-F - Aggressive cows

    F - Aggressive cows Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. ...

  4. ubuntu系统定时运行 crontab

    1,crontab是个啥? ubuntu系统自带cron工具,cron是一个系统上的定时工具,用它的好处在于,不同的程序可以用同一个计时器,这样就省得不同程序各自sleep了,另外它还支持比较多的个性 ...

  5. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  6. MySQL登录和退出

    登录必须保证服务是启动的(否则有权限有身份也进不来)进入仓库(数据库)前,有身份验证.需要有权限和密码 (用户名密码) 登录的方式一 通过MySQL自带的客户端 Command Line Client ...

  7. Appnium 环境搭建

    NodeJs 下载安装 npm install -g appium-doctor Java JDK jdk-8u241-windows-x64 添加环境变量:JAVA_HOME 在环境变量Path中添 ...

  8. JUC-线程间通信

    面试题: 两个线程,一个线程打印1-52,另一个打印字母A-Z打印顺序为12A34B...5152Z, 要求用线程间通信 线程间通信:1.生产者+消费者2.通知等待唤醒机制 多线程编程模版中 1.判断 ...

  9. 08 部署nginx web服务器(转发fastDFS请求)

    先准备两个文件: fastdfs-nginx-module-master.tar.gz:fastDFS nginx安装包 nginx-1.17.3.tar.gz:nginx安装包 注:这两个包文件要匹 ...

  10. pl/sql developer试用期结束

    (产品代码)Product Code:ljkfuhjpccxt8xq2re37n97595ldmv9kch (序列号)Serial Number:302967 (口令)Password:xs374ca ...