gulp browser-sync 构建前端开发工具

最新推荐文章于 2025-05-21 23:13:20 发布

lqmeta

最新推荐文章于 2025-05-21 23:13:20 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： gulp 构建工具 browser-sync

本文链接：https://blog.youkuaiyun.com/issac20152015/article/details/79614766

版权

该博客介绍了如何利用gulp和browser-sync搭建前端开发环境。Browsersync实现实时文件更改自动刷新页面。通过config.js和gulpfile.js配置，文件编译至dist目录并由BrowserSync监听更新。项目提供demo下载，详细步骤包括安装依赖、替换gulp-rev和gulp-rev-collector，最后执行gulp命令生成dist目录，BrowserSync自动刷新浏览器。打包发布过程会在根目录创建release文件夹，包含发布版zip压缩包，版本号来源于config.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

browser-sync

Browsersync 能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

config.js 配置文件

var src = 'src';
var dest = 'dist';

module.exports = {
    version: '1.0.0',
    src: src,
    dest: dest,
    less: {
        all: src + "/css/**/*.less", // 所有 less
        src: src + "/css/*.less", // 需要编译的 less
        dest: dest + "/css", // 输出目录
        settings: { // 编译 less 过程需要的配置，可以为空

        }
    },
    sass: {
        all: src + "/css/**/*.scss", // 所有scss
        src: src + "/css/*.scss", // 需要编译的scss
        dest: dest + "/css", // 输出目录
        settings: { // 编译 scss 过程需要的配置，可以为空

        }
    },
    js: {
        src: src + "/js/**/*.js",
        dest: dest + "/js"
    },
    html: {
        src: src + "/**/*.html",
        dest: dest,
        ignore: ["!"+src+"/publicHTML/*.html"]
    },
    img: {
        src: src + '/img/*.{png,jpg,gif,ico}',
        dest: dest + "/img"
    },
    copy: {
        // src: src + '/static/*',
        src: src + '/**',
        dest: dest
        // dest: dest + "/static"
    },
    rev: {
        revCss: {
            src: dest + "/css/**/*.css",
            dest: dest + "/css",
            revDest: dest + "/rev/css"
        },
        revJs: {
            src: dest + "/js/**/*.js",
            dest: dest + "/js",
            revDest: dest + "/rev/js"
        }
    }
};

gulpfile.js

将文件编译到 dist 目录下, 触发 BrowserSync

var gulp         = require('gulp');
// Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。
var browserSync  = require('browser-sync').create(); // 创建Browsersync实例
var SSI          = require('browsersync-ssi');
var concat       =

最低0.47元/天解锁文章