本文介紹了如何使用 gulp 在瀏覽器中進行刷新的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!
問題描述
限時送ChatGPT賬號..
我有一個應用在 iis 中,它是一個用 angularjs 和 webapi C# 2.0 制作的應用,我想創建一個任務,在我保存任何 js 文件后立即更新瀏覽器.
gulp 版本:3.9.1
gulp.task('livereload', function () {gulp.watch(config.files.js);});
解決方案
gulp-livereload
<塊引用>用于 livereload 的輕量級 gulp 插件,可與livereload chrome 擴展 或 livereload 中間件.
設置簡單:
var gulp = require('gulp'),少=需要('gulp-less'),livereload = require('gulp-livereload');gulp.task('less', function() {gulp.src('less/*.less').pipe(少()).pipe(gulp.dest('dist')).pipe(livereload());});gulp.task('watch', function() {livereload.listen();gulp.watch('less/*.less', ['less']);});
瀏覽器同步
<塊引用>Gulp 沒有官方的 Browsersync 插件,因為它不是需要!您只需 require
模塊,利用 API 并配置它帶有 options.
新來的酷小孩,大部分人都已經搬過來了.
<塊引用>Browsersync 支持流,因此您可以在以下位置調用 reload任務期間的特定點,所有瀏覽器都將被告知變化.因為 Browsersync 只關心你的 CSS完成編譯 - 確保在 gulp.dest
之后調用 .stream()
.
var gulp = require('gulp'),browserSync = require('browser-sync').create(),sass = require('gulp-sass');//靜態服務器 + 看 scss/html 文件gulp.task('serve', ['sass'], function() {browserSync.init({服務器:./app"http://或者//代理:'yourserver.dev'});gulp.watch("app/scss/*.scss", ['sass']);gulp.watch("app/*.html").on('change', browserSync.reload);});//將 sass 編譯成 CSS &自動注入瀏覽器gulp.task('sass', function() {返回 gulp.src("app/scss/*.scss").pipe(sass()).pipe(gulp.dest("app/css")).pipe(browserSync.stream());});gulp.task('default', ['serve']);
對于手動重新加載:
//...var reload = browserSync.reload;//保存對 `reload` 方法的引用//觀察 scss 和 html 文件,對每個文件做不同的事情.gulp.task('服務', function () {//從這個項目的根目錄提供文件browserSync.init({/* ... *
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!