步骤:

安装依赖: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. 在bootstrap的column中的formatter里不能传递row参数吗?

    row 是一个对象  你需要把它转成字符串用JSON.stringify(row),这样就是字符串了,但是还有问题,你需要给加密一下encodeURI(JSON.stringify(row)),然后方 ...

  2. 杭电oj2037——今年暑假不AC(java实现)

    思路:标准贪心 先把所有思路列出来: 1.优先选择开始时间最早的,经分析,不可行 2.优先选择持续时间最短的,经分析,不可行 3.优先选择结束时间最早的,经分析,可行 然后根据第三种思路实现代码就好 ...

  3. Vim入门——Windows下安装

    下载页面:https://www.vim.org/download.php Windows选用的是MS-Windows: 下图为展示: 因为最近被墙,镜像貌似没中国内陆地区,因此,选择使用GitHub ...

  4. java替换文件中某一行文本的内容

    个人博客 地址:http://www.wenhaofan.com/article/20180913160442 代码如下 package com.wenhaofan.common.kit; impor ...

  5. gflag的简单入门demo

    gflags 一. 下载与安装 这里直接使用包管理器安装: sudo apt install libgflags-dev 二. gflags的简单使用 1. 定义需要的类型 格式: DEFINE_类型 ...

  6. jdbc url的若干参数

    参数名称 参数说明 缺省值 最低版本要求 user 数据库用户名,用于连接数据库 无 所有版本 password 用户密码(用于连接数据库) 无 所有版本 useUnicode 是否使用Unicode ...

  7. JDBC未知列

    Exception in thread "main" com.mysql.jdbc.exceptions.jdbc4. MySQLSyntaxErrorException: Unk ...

  8. 详解C/C++中的的:#pragma pack(push) 、#pragma pack(pop) 和#pragma pack()

    前言 我们知道结构体内存对齐字节可以通过#pragma pack(n) 的方式来指定. 但是,有没有想过一个问题,某些时候我想4字节对齐,有些时候我又想1字节或者8字节对齐,那么怎么解决这个问题呢? ...

  9. Windows恢复环境启动失败,重新配置WinRE

    前言 现在很多朋友追求系统镜像体积缩小,往往删除了系统镜像中C:\Windows\System32\Recovery\winre.wim这个文件,大小将近500MB,删除这个文件不会给系统造成其他影响 ...

  10. linux切换普通用户遇bash-4.1解决

    1,修改vim  /etc/passwd 把对应用户的登陆环境改成,/bin/bash 2,复制配置 cp -a /etc/skel/. /home/www/ 3再次尝试su www有效