gulp实现修改文件自动刷新

Posted 2021-04-08 前端迷

效果图

方案1：

正如上图所示，使用 gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了，无形中省了好多时间，有没有！：D

• Gulp.js：比 Grunt 更简单的自动化项目构建工具

• gulp-livereload：顾名思义，这是 Gulp.js 中的其中一个插件，本文的主题就是它了。

安装

第一步：全局安装gulp 和 当前目录部署 gulp 和 gulp-livereload

npm install gulp -g npm install gulp gulp-livereload --save-dev

第二步：安装 chrome livereload插件，

使用

第一步： 当前目录新建 gulpfile.js 文件，写入以下代码。

var gulp = require('gulp'),    livereload = require('gulp-livereload');gulp.task('watch', function () {    // 这里的watch，是自定义的，写成live或者别的也行    var server = livereload();        // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件    gulp.watch('app/**/*.*', function (file) {        server.changed(file.path);    });});

第二步： 命令行下运行

gulp watch

此时，你会发现当你修改 app 文件夹下的任何文件，命令行都会有内容输出，说明能够监控到文件的变化，运作正常了。

第三步： 以服务器的方式打开页面，例如 localhost:3000，而不是 file:///F:/web/app/index.html接着点击刚刚安装的 chrome插件 ，中间变为实心黑色圆点表示开始运作了。

现在只要文件一保存，浏览器就会马上刷新了。

方案2：

安装

首先，首先需要安装 Browsersync 和 依赖包 Gulp 。如果你是第一次安装，那么你可以通过--save-dev命令，这将会自动在你的package.json里添加依赖，下一次再安装时，你只需要npm install

$ npm install browser-sync gulp --save-dev

然后，在您的 gulpfile.js 文件里使用它们。

var gulp        = require('gulp');

var browserSync = require('browser-sync').create();

 

// 静态服务器

gulp.task('browser-sync', function() {

    browserSync.init({

        server: {

            baseDir: "./"

        }

    });

});

 

// 代理

 

gulp.task('browser-sync', function() {

    browserSync.init({

        proxy: "你的域名或IP"

    });

});

SASS + CSS 注入

通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload，所有的浏览器将被告知的变化并实时更新. 因为Browsersync只在乎您的CSS在编译完成 finished 后 - 注意： gulp.dest 后调用重载。

var gulp        = require('gulp');

var browserSync = require('browser-sync').create();

var sass        = require('gulp-sass');

var reload      = browserSync.reload;

 

// 静态服务器 + 监听 scss/html 文件

gulp.task('serve', ['sass'], function() {

 

    browserSync.init({

        server: "./app"

    });

 

    gulp.watch("app/scss/*.scss", ['sass']);

    gulp.watch("app/*.html").on('change', reload);

});

 

// scss编译后的css将注入到浏览器里实现更新

gulp.task('sass', function() {

    return gulp.src("app/scss/*.scss")

        .pipe(sass())

        .pipe(gulp.dest("app/css"))

        .pipe(reload({stream: true}));

});

 gulp.task('default', ['serve']);

浏览器重载

有时候，您可能只是想完全重新加载页面 (例如，处理一堆JS文件后), 但您希望在任务发生后重载。这将在 gulp 4.x.x 时变得更容易, 但现在您可以做到以下几点： (确保您 return 从您的工作流 ，以确保 browserSync.reload() 被调用在正确的时间。

// 处理完JS文件后返回流

gulp.task('js', function () {

    return gulp.src('js/*js')

        .pipe(browserify())

        .pipe(uglify())

        .pipe(gulp.dest('dist/js'));

});

 

// 创建一个任务确保JS任务完成之前能够继续响应

// 浏览器重载

gulp.task('js-watch', ['js'], browserSync.reload);

 

// 使用默认任务启动Browsersync，监听JS文件

gulp.task('serve', ['js'], function () {

 

    // 从这个项目的根目录启动服务器

    browserSync({

        server: {

            baseDir: "./"

        }

    });

 

    // 添加 browserSync.reload 到任务队列里

    // 所有的浏览器重载后任务完成。

    gulp.watch("js/*.js", ['js-watch']);

});

手动重载

如果流支持并不满足您的需求，您可以通过创建一个任务来手动触发重载方法。我们创建了一个sass任务,在我们修改文件后会在浏览器里注入CSS，但是当HTML文件被更改时，浏览器将会被重新加载（手动重载）。

// 使用变量引用 `reload` 方法

var reload = browserSync.reload;

 

// 编译 SASS & 自动注入到浏览器

gulp.task('sass', function () {

    return gulp.src('scss/styles.scss')

        .pipe(sass({includePaths: ['scss']}))

        .pipe(gulp.dest('css'))

        .pipe(reload({stream:true}));

});

 

// 监听scss和html文件, 当文件发生变化后做些什么！

gulp.task('serve', ['sass'], function () {

 

    // 从这个项目的根目录启动服务器

    browserSync({

        server: {

            baseDir: "./"

        }

    });

 

    gulp.watch("scss/*.scss", ['sass']);

    gulp.watch("*.html").on("change", browserSync.reload);

});