正确设置Gulp browserSync - 腾讯云开发者社区

browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync...Image.png 2.安装gulp: npm i gulp --save ?...Image.png var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload...= browserSync.reload; // 静态服务器 // 设置静态目录 gulp.task('start', function() { browserSync.init({...//设置静态目录 server: { baseDir: ".

5657 0

给初学者的Gulp教程（译）

这个将要笨重的打开两个命令行窗口以及独立运行gulp browserSync和gulp watch，所以，让我们使用Gulp来让他们一起运行，通过告知watch任务，browserSync必须在watch...开发者面对一个问题是，当自动化运行这个进程时，很难将你的脚本串联成正确的顺序。...最好设置type为你试图连接的文件的类型。如果你设置type为remove,Gulp将移除整个构件块，而不生成文件。指的是生成文件的目标地址。...$ npm install gulp-useref --save-def var useref = require('gulp-useref'); 设置useref任务和我们到目前为止设置的其他任务相似...在Gulp任务中设置它就和我们第一个“hello”的示例一样。

4.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Gulp探究折腾之路(I)

前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，...请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。...BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中安装BrowserSync。...，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。...browser-sync start --proxy "Browsersync.cn" "css/*.css" 参考博文：BrowserSync，迅捷从免F5开始。

1.8K8 0

node和gulp实现前端工程自动化(附：gulp常用插件)

.pipe(browserSync.reload({ stream: true })); }); var concat = require('gulp-concat'); var uglify....pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(browserSync.reload({ stream....pipe(browserSync.reload({ stream: true })); }); var htmlmin = require('gulp-htmlmin')...: true, removeComments: true })) .pipe(gulp.dest('dist')) .pipe(browserSync.reload(...{ stream: true })); }); var browserSync = require('browser-sync'); gulp.task('serve', function

5151 0

前端页面可视化开发-livestyle,livereload,browser-sync

执行“watch”脚本 gulp watch 修改文件后，报错 file参数名称修改正确，重启命令 html修改正确可以参考github上的主页...-g browser-sync 优点：可以安装在多个环境下开源支持一些构建工具可以模拟一些网络状况支持交互同步支持文件同步通过 UI和文件行对其进行设置...browserSync = require("browser-sync"); gulp.task('watch',function(){ livereload.listen(); gulp.watch...('browser-sync',function(){ browserSync.init({ server:{ baseDir:"./" } }) }) 命令行执行： gulp....livestyle：http://livestyle.io 2.livereload : http://livereload.com 3.browser-sync : http://www.browsersync.io

1.1K2 0

Gulp开发教程（翻译）

对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。...BrowserSync提供了一种在多个浏览器里测试网页的很好方式（查看大图）。 BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。...实际上BrowserSync对于Gulp并不算一种插件，因为BrowserSync并不像一个插件一样操作文件。然而，npm上的BrowserSync模块能在Gulp上被直接调用。...('gulp'), browserSync = require('browser-sync'); gulp.task('browser-sync', function () { var...此外BrowserSync的开发者还写了很多关于BrowserSync+Gulp仓库的其他用途。 Why Gulp?

8674 0

前端工程化 | 定制专属提速“外挂”（上）

= require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload...') var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload...browserSync.init({ server:{ baseDir:'./' } }); gulp.watch(['./*...安装好的插件 require('模块名称') var gulp = require('gulp'); var browserSync = require('browser-sync').create(...); var reload = browserSync.reload; var concat = require('gulp-concat'); var cleanCSS = require('gulp-clean-css

1.1K5 0

从零开始构建你的 Gulp

/config').watch; gulp.task('watch', ['browsersync'], () => { gulp.watch(config.styles, ['styles'...是一个代码审查插件，除了审查 CSS 语法外，还能审查类 CSS 语法，帮助我们审查出重复的 CSS 样式、不规范的代码、无效颜色值、无意义的浏览器前缀以及我们所配置的一些审查规则，我们可以根据自身项目的需求来设置不同的规则...= require('gulp'), browsersync = require('browser-sync'), browserify = require...gulp'), browsersync = require('browser-sync'), config = require('../...../config').browsersync; gulp.task('browsersync', ['build'], () => { browsersync.init(config.development

1.1K4 0

gulp 实现纯html、css、bootstrap 的打包

('gulp');const cssmin = require('gulp-cssmin');const uglify = require('gulp-uglify');const browserSync...(browserSync.stream());}// CSS 任务function css() { return gulp.src('css/main.css') .pipe(cssmin())....pipe(gulp.dest('dist/css')) .pipe(browserSync.stream());}// JavaScript 任务function js() {return...gulp.src('js/main.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(browserSync.stream...());}// 监视并刷新任务gulp.task('watch', () => { browserSync.init({ server: { baseDir: './' } }

7002 0

【Vue】使用 Vue2 开发一个项目列表展示应用

('default', [ 'webpack']); 下面我们分别介绍一下 gulp 和 webpack 的配置 Gulp 配置 Gulp 中主要配置了两个任务：webpack 和 browserSync...下面是具体的配置 var gulp = require("gulp"); var browserSync = require('browser-sync'); // 添加 browserSync 任务...gulp.task('browserSync', function () { browserSync({ server: { baseDir: '.'...("watch", function () { gulp.watch("./**/*.html", browserSync.reload); gulp.watch("dist/**/*....js", browserSync.reload); gulp.watch("dist/**/*.css", browserSync.reload); }); // 添加到默认任务 gulp.task

1.2K1 0

放弃webpack,拥抱gulp

('path'); const pathDir = (dir) => { return path.resolve(__dirname, dir); } // 设置base，当输出文件目标dist文件时...参考browser-sync[2] const { src, dest, series, watch } = require('gulp'); const browserSync = require(...(); // 调用init开启端口访问 server.init({ port: '8081', //设置端口 open: true, // 自动打开浏览器 files:...server", "build": "gulp build" }, npm run build 在启动server之前，我们先执行npm run build，然后再执行下面命令,保证browserSync...://browsersync.io/docs/gulp [3]api： https://www.gulpjs.com.cn/docs/api/src/ [4]code-example： https://

9171 0

Gulp 在金蝶云平台项目中的使用经验

后来，我发现了 Browsersync。简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。...以下代码是使用代理去实现： var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task...('serve', function () { browserSync.init({ proxy: "http://cloud.xxx.com" }); gulp.watch...('*.html').on('change', browserSync.reload); }); 运行命令，默认的浏览器会自动打开 127.0.0.1:3000 链接 gulp serve...直接把 127.0.0.1:3000 链接换成 cloud.xxx.com:3000 即可，Browsersync 实际就是监听 3000 端口来实现刷新浏览器。

1.7K0 0

WEB前端：“懒人”养成计划

使用GULP，可以完成文件压缩，JS混淆，编译SASS，LESS 等，基本上你想要的功能，都可以通过代码实现。在项目，我还用GULP来下载文件，更新本地的JSON数据。...有关具体GULP的介绍，请参考GULP：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 珍惜键盘，远离F5 - Browsersync...Browsersync给你想要的，甚至还它还内置了移动端调试神器WEINRE，简直不要太diao。...Browsersync官网：https://www.browsersync.io/ 光说不练假把式 - 手把手带你起飞 STEP-1：准备好各种环境首先你得有nodejs环境，然后你得全局安装GULP...，http-server,browsersync，如下所示： ?

9308 0

第210天：node、nvm、npm和gulp的安装和使用详解

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率...gulp是引入开发过程中的一些小工具，生产模式不需要gulp 本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了...2、首先确保你已经正确安装了NODE环境，然后以全局方式安装gulp npm install -g gulp 全局安装完gulp后，还需要在每个要使用gulp的项目中单独安装一次，把目录切换到你的项目文件夹中.../%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http...6、在Gulp中使用BrowserSync BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。

2.5K1 0

Gulp安装流程、使用方法及cmd常用命令导览

这时要看一下版本号就知道了:命令行输入—— node -v npm -v node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。...gulp.task(‘taskName’,function(){ });//定义一个task任务，名字为taskName：（这里是你自定义任务名称）、设置一个回调函数。...//然后在命令行里直接执行gulp，不用填写执行的任务名字，他就可以自动执行默认的task，然后转向指定的其他依赖的task了、。 //可以比喻成你设置一条流水线作业吧。...一个吊炸天的插件，多个浏览器实时测试：http://www.browsersync.cn 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass...: "./" 14 }); 15 //这段代码是说，建立一个叫browser-sync的任务，然后让他初始化，设置服务器的基本目录在当前目录 16 gulp.watch('scss

2.4K6 0

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

最终，我找到了它——browser-sync，以下是官方对它的解释： Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。...您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”...const gulp = require('gulp'); const browserSync = require('browser-sync').create(); const nodemon = require...browserSync.init()这行代码的init方法中，第一个参数我们需要传入一个配置对象，第二个参数我们需要定义一个回调方法。 proxy：代理服务端的接口地址。

6172 0

Gulp 自动化构建案例

yarn add gulp --dev 复制代码安装完毕之后我们就开始进入正题样式编译首先我们使用gulp进行scss的样式编译 gulpfile.js const { src, dest }...'gulp-sass')(require('sass')); // 5.0版本的gulp const style = () => { return src('src/assets/styles/*...给我们提供了gulp-load-plugins的依赖包 yarn add gulp-load-plugins --dev 复制代码然后 // gulp组件引入 const loadPlugins =...> { return sass } } }) 复制代码热更新不多比比直接上 npm i browser-sync --dev 复制代码 gulpfile.js const browserSync...= require('browser-sync') const bs = browserSync.create() ... const serve = () => { bs.init({

1.4K2 0

Gulp 定制专属提速“外挂”（下）

友情提示：推荐阅读时间10分钟 + 练习时间10分钟上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。...使用Gulp对静态资源的处理安装：gulp-asset-rev和gulp-rev插件命令行：cnpm install gulp-asset-rev和cnpm install gulp-rev 提醒：...引入Gulp安装好的插件 require('模块名称') var gulp = require('gulp'); var browserSync = require('browser-sync').create...(); var reload = browserSync.reload; var concat = require('gulp-concat'); var cleanCSS = require('gulp-clean-css...浏览器自动刷新 gulp.task('f5', function(){ browserSync.init({ server:{ baseDir:'./'

1.1K8 0

Express+Less+Gulp配置高效率开发环境

": "^3.9.1", "gulp-cache": "^0.4.5", "gulp-clean-css": "^2.3.2", "gulp-concat": "^2.6.1",..."gulp-ejs": "^2.3.0", "gulp-htmlmin": "^3.0.0", "gulp-imagemin": "^3.1.1", "gulp-less...": "^3.3.0", "gulp-livereload": "^3.8.1", "gulp-nodemon": "^2.2.1", "gulp-uglify": "^2.0.0...gulp'); var minify = require('gulp-clean-css'); var browserSync = require('browser-sync'); var nodemon...('browser-sync', ['nodemon'], function() { browserSync.init(null, { proxy: "http://localhost:3008

2.1K0 0

实习第六周

4.修改browsersync的端口号由于默认的3000与我的服务有冲突所以修改端口号为其他的 gulp.task('browserSync', function() {...browserSync.init({ // 路径 server: { baseDir: './'...}, port: 3010//设置端口号 }) }) 5.ng1.x directive自定义指令的link属性 link: function(scope

5092 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

自动调试自动编译五分钟上手

给初学者的Gulp教程（译）

Gulp探究折腾之路(I)

node和gulp实现前端工程自动化(附：gulp常用插件)

前端页面可视化开发-livestyle,livereload,browser-sync

Gulp开发教程（翻译）

前端工程化 | 定制专属提速“外挂”（上）

从零开始构建你的 Gulp

gulp 实现纯html、css、bootstrap 的打包

【Vue】使用 Vue2 开发一个项目列表展示应用

放弃webpack,拥抱gulp

Gulp 在金蝶云平台项目中的使用经验

WEB前端：“懒人”养成计划

第210天：node、nvm、npm和gulp的安装和使用详解

Gulp安装流程、使用方法及cmd常用命令导览

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

Gulp 自动化构建案例

Gulp 定制专属提速“外挂”（下）

Express+Less+Gulp配置高效率开发环境

实习第六周

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐