使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。...LIVERELOAD LiveReload结合了浏览器扩展（包括Chrome extension），在发现文件被修改时会实时更新网页。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...（查看大图） BrowserSync不需要使用浏览器插件，因为它本身就可以为你提供文件服务（如果文件是动态的，则为他们提供代理服务）和用来开启浏览器和服务器之间的socket的脚本服务。
watch-compile.gif 让我们来进行下一步，以及让Gulp重新加载浏览器，当我们保存一个.scss文件，通过Browser Sync。...现在，我们需要同时运行watch和browserSync任务来进行实时加载。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器 让我们进入下一届，讨论优化资源文件的部分。...组合Gulp任务 让我们总结一下我们做的吧。到目前为止，我们创建了两个不同Gulp任务集。 第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。
这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。...---- 注:即便使用npm link感觉也不是一个特别简洁的方案。并且在使用的时候还遇到了些许问题: 之前有提问于@segmentFaultgulp如何管理多项目？...它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。 LiveReload结合了浏览器扩展（包括Chrome extension），在发现文件被修改时会实时更新网页。...它可以和gulp-watch插件或者前面描述的gulp-watch()函数一起使用。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。
，防止使用时出现问题；另外，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。...browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。...2.6 查看browser-sync使用效果 Tips：gulp + 任务名称是用来执行gulp的任务。...('dist/css')); }); 3.5 查看gulp-concat使用效果 4 CSS文件压缩 在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理，一方面可以提升网站的加载速度，另外一方面可以减少带宽...学堂独家内容，转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”
搭建一个简单的前端应用 相比较webpack，其实gulp的项目结构更偏向传统的应用，只是我们借助gulp工具解放我们的一些代码压缩、es6编译、打包以及在传统项目中都可以使用less体验。...ejs方式 然后运行npx gulp taskImage 图片压缩得不小 在这之前，我们分别定义了三个不同的任务，gulp导出的任务有公开任务和私有任务，多个公开任务可以串行组合使用 组合任务 series...://localhost:8081 我们使用了一个watch监听public目录下的所有文件，如果文件有变化时，会执行taskBuild任务会在dist目录下生成对应的文件，然后会启动一个本地服务，打开一个...，就重新加载 watch(pathDir('public'), taskBuild); const server = browserSync.create(); server.init...", "build": "gulp build" }, npm run build 在启动server之前，我们先执行npm run build，然后再执行下面命令,保证browserSync
'gulp'); gulp.task('default', ['watch']); 可以看到 default 任务并没有执行任何操作，但执行 defalut 任务前，我们需要先执行 watch 任务，我们再来看看...，我们将经过审查编译压缩过后的代码进行编码，而不会影响之前已执行的操作，若是任务执行的顺序相反，则会导致编码过后的文件无法执行后续的操作，同样的，在 build.js 中，我们也是先执行其他任务，最后才执行...()) .pipe(jshint.reporter(stylish)) }) 图片 图片 通过引入 browserify 插件，使得我们可以在浏览器中加载 Node.js...两个属性，此外，我们还引入了 bundleLogger.js 和 handleErrors.js 两个文件，处理错误信息及记录绑定的过程，而 browserify-shim 插件则是能够帮助我们加载类似...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面，更重要的是，可以同时在 PC、平板、手机等设备下进项调试，我们可以使用 Browsersync 提供的静态服务器，对我们的
在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...然后，可以使用以下命令在全局围内安装 gulp：npm install -g gulp创建项目目录在本地磁盘上创建一个新的文件夹，例如 my-project，然后在其中创建以下文件：my-project...在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。
('default', [ 'webpack']); 下面我们分别介绍一下 gulp 和 webpack 的配置 Gulp 配置 Gulp 中主要配置了两个任务：webpack 和 browserSync...browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。...}, port: 80 }) }); // 配置需要监听的文件，当这些文件发生变化之后 // 将调用 browserSync.reload 使浏览器自动刷新 gulp.task...("watch", function () { gulp.watch("./**/*.html", browserSync.reload); gulp.watch("dist/**/*....js", browserSync.reload); gulp.watch("dist/**/*.css", browserSync.reload); }); // 添加到默认任务 gulp.task
浏览器插件1安装 如果之前sublime装过低版本的livestyle，需要先卸载低版本的 安装 安装livestyle 安装成功后，安装http-server...执行“watch”脚本 gulp watch 修改文件后，报错 file参数名称修改正确，重启命令 html修改正确 可以参考github上的主页...，支持gulp脚本） 代理服务器监听文件，不需要安装浏览器插件，只需安装node.js插件，局部刷新，可以实现手机浏览器和PC浏览器多个同步，包括视图同步和交互同步 安装node.js和插件...使用命令+谷歌浏览器： 在文件目录下 http-server 2.livereload使用命令+V**代理+谷歌浏览器： 在文件目录下 livereload gulp watch...3.browser-sync的使用命令,不用V**代理,各浏览器同步内容和交互： 在文件目录下 browser-sync start --server --files “**” gulp
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师，使用它将提高您30%的工作效率。...如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。.../static" } }); //监听某文件的改变 gulp.watch("....Image.png 您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制
/ycjcl868/Express_Gulp [image.gif] 目的 我使用Express+Ejs+Less开发，想开发时对所有资源进行压缩并同步到浏览器端，Google搜索一遍，都不是太符合我的项目要求...proxy: "http://localhost:3008", files: ["dist/views/*....('views/**/*.ejs', ['ejs']); // 创建实时调整服务器 -- 在项目中未使用注释掉 var server = livereload(); // 监听 dist.../ 目录下所有文档，有更新时强制浏览器刷新（需要浏览器插件配合或按前文介绍在页面增加JS监听代码） gulp.watch(['public/dist/**']).on('change', function...： npm install，使用时先运行gulp build将文件压缩、打包、编译，然后再执行gulp开启自动更新服务器。
刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考 gulp 教程之 gulp-livereload。...('serve', function () { browserSync.init({ proxy: "http://cloud.xxx.com" }); gulp.watch...基于 gulp 的前端构建 之前使用 Grunt 时总结了一篇「基于 Grunt 的前端构建」。...# 开发监控，浏览器自动刷新 $ gulp build # 打包上线 开发阶段 执行 gulp dev 命令，gulp 会进行一系列构建操作，最后在 dist 目录下生成可运行文件...); }); 执行 gulp serve 命令，gulp 会执行跟 gulp dev 一样的操作并监听源文件，唯一不同的是它在执行后会监听某个端口，一旦有文件改动它会帮你自动刷新浏览器，帮你省下了按
如果在编辑器中对html文件增加或删除了元素，或者是在css文件中修改了某个元素的某个样式，然后想在浏览器中看到效果，通常的步骤是：把窗口切换到浏览器，然后按键盘上的F5刷新页面。...在找它之前，我也找到其他可以实现自动刷新浏览器的插件，如：LiveReload，它也可以自动刷新页面，实时预览html效果。但是，我为什么没用LiveReload呢？...npm install --save-dev browser-sync 如果你想更加深度地了解它，可以在浏览器上搜索以下网址： http://www.browsersync.cn/docs/ browser-sync...可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。...gulp-nodemon几乎和普通gulp-nodemon完全一样，但它是为执行Gulp任务而设计的。
gulp和后边的横线是有空格的】 特别记得这个：--save-dev：这个就是装到局部的标志啊，以后在局部装插件也是少不了他的 在当前项目文件夹下安装gulp，只要你定位到那个目录下，就可以在那个目录下安装本地...//他只构建一个执行的框架，而不管你要执行的内容，只管排队和到达，不管交通方式和运输的人员身份。...一个吊炸天的插件，多个浏览器实时测试：http://www.browsersync.cn 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass...part4 比较经典的： Gulp监听：http://www.ydcss.com/archives/34 Gulp自动加载：http://www.cnblogs.com/yuzhongwusan/p/...5417074.html http://www.ydcss.com/archives/702 Gulp自动加载和gulp-sass合用：http://blog.csdn.net/qq_33236453/
Watchers 当检测到更改时，Watchers观察源文件以进行更改和调用任务。 gulpfile.js gulp项目的配置文件。....pipe(scss()) 在这里，我们调用之前定义好的gulp-sass插件 .pipe(gulp.dest('css')); 最后，我们使用“gulp.dest”定义文件的目标文件夹。...为了启动它，请使用以下命令： gulp 这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。...gulp.watch('scss/**/*.scss', ['scss']); 最后，我们调用Gulp的watch函数指向以“.scss”结尾的任何文件，并且每当发生更改事件时，运行“scss”任务。...以下是几个杰出的例子： BrowserSync BrowserSync注入CSS，JavaScript，并在进行更改时自动刷新浏览器。
在接下来的内容之前，需要说明一下我平时使用的环境。...如果 Browsersync 的 open 选项设置的为 true ，在首次编译完成之后浏览器会自动打开一个页面，否则需要手动打开，默认的是 http://localhost :3000，具体依所设置的...有别于一般的刷新（即整页相关资源重新加载），它可以只对发生变化的部分模块进行热替换，而其它部分保持不变。这使得它不仅反应及时，通常也能保持当前应用状态不会被刷新，这对于调试 SPA 项目十分方便。..."> @endif 也可以选择安装 浏览器插件 替代 执行 yarn run watch-poll 执行该命令以监听文件变化并让 webpack 自动重新编译。...files 规则所包含的前后端文件 前端模块（即 webpack 加载的模块） 浏览器当前页面所加载的前端文件 速度 修改 css 时较快，其它文件时一般 快，特别是热替换时 一般 可靠性 可靠 存在
换句话说，只要把静态资源缓存下来，在缓存有效的时间内，用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”，可以发送关键字缓存到HTML5学堂公众号。...为静态资源请求添加Query 这个理解起来比较简单，就是在静态资源请求后面添加参数，这个参数的值是时间戳和版本号的结合，当然也可以使用其它方式来计算该参数的值。 修改前 <!...因为在覆盖的过程中，静态资源和页面文件的部署有一定的时间间隔，对于一个大型网站来说即使时间间隔很小，都有可能出现新的用户访问。那在这个时间间隔内，用户访问网站会发生什么情况呢？...使用Gulp对静态资源的处理 安装：gulp-asset-rev和gulp-rev插件 命令行：cnpm install gulp-asset-rev和cnpm install gulp-rev 提醒：...浏览器自动刷新 gulp.task('f5', function(){ browserSync.init({ server:{ baseDir:'./'
npm一样的镜像库，http://npm.taobao.org/，具体怎么使用可以去这个网站看使用介绍，它和官方的npm每隔10分钟同步一次。...注意-g可以直接放到install的后面，我们以后也最好这样用，因为这样用，我们可以在cmd中上下箭头切换最近命令的时候，容易修改，更方便操作。安装完成后，我们就可以使用了。.../%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http...文件 gulp-minify-html 最小化图像：gulp-imagemin 5、运行gulp 说明：命令提示符执行gulp 任务名称； 编译less：命令提示符执行gulp testLess； 当执行...6、在Gulp中使用BrowserSync BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
在Node.js中，每次修改文件都要在命令行具中重新执行该文件,非常繁琐。...使用步骤 使用npm install nodemon -g下载它 -g代表全局安装 在命令行工具中用nodemon命令替代node命令执行文件 4....下载nrm第三方模块时会出现以下错误 错误情况： 执行命令npm install nrm -g下载完nrm模块后查询下载地址列表会报错，无法加载文件，因为在此系统上禁止运行脚本。...Gulp使用 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件...gulp-uglify :压缩混淆lavaScript gulp-file- include公共文件包含 browsersync 浏览器实时同步 插件使用： 去npm官网搜索
的入口文件 conf：配置文件及第三方工具的父目录（Bowersync，Webpack，Gulp，karma） gulp_tasks 和 gulpfile.js：构建任务 .babelrc，package.json...，node_modules：配置以及所需依赖包 .gitattributes 和 .gitignore：git的配置 STEP 5：在浏览器中预览你的app 如果想要在你喜欢的浏览器上预览你的 web...$ npm run serve 在浏览器的新页面打开localhost:3000 5.2 停止服务器 如果你想停止服务器，按 Ctrl + C 停止当前CLI的进程 注意：你不能在同一端口运行多个http...即时加载的功能是通过配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 实现的。...STEP 7：使用 Local Storage 永久保存 todos 让我们重新看一下当刷新浏览器时 React/Redux mytodo 不能保存的问题。
领取专属 10元无门槛券
手把手带您无忧上云
