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