但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自动刷新。...今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。...，防止使用时出现问题；另外，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。...browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。...('dist/css')); }); 3.5 查看gulp-concat使用效果 4 CSS文件压缩 在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理，一方面可以提升网站的加载速度，另外一方面可以减少带宽
一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...BrowserSync提供了一种在多个浏览器里测试网页的很好方式（查看大图）。 BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。...你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。...（查看大图） BrowserSync不需要使用浏览器插件，因为它本身就可以为你提供文件服务（如果文件是动态的，则为他们提供代理服务）和用来开启浏览器和服务器之间的socket的脚本服务。
现在让我们继续向前，以及学习如何使用Gulp配置一个工作流 我们要配置什么 在看完这篇文章后，你将拥有一个工作流，来进行我们文章开始所说的一些任务： 生成一个Web服务器 当一个文件保存时，浏览器自动刷新...watch-compile.gif 让我们来进行下一步，以及让Gulp重新加载浏览器，当我们保存一个.scss文件，通过Browser Sync。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器 让我们进入下一届，讨论优化资源文件的部分。...组合Gulp任务 让我们总结一下我们做的吧。到目前为止，我们创建了两个不同Gulp任务集。 第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。
(outPut)); }); 在gulpfile.js同级目录运行gulp scripts即可；PS:当然前提是您已经安装了nodejs，并且使用npm安装了代码中需要的插件gulp和gulp-uglify...这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。...它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。 LiveReload结合了浏览器扩展（包括Chrome extension），在发现文件被修改时会实时更新网页。...它可以和gulp-watch插件或者前面描述的gulp-watch()函数一起使用。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。
环境配置 这里我们使用 Gulp 和 Webpack 用作项目构建工具。初次使用 Gulp 和 Webpack 可能不太适应，因为它们的配置可能让你看的一头雾水。...不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。等到使用了一段时间之后，自然而然的就知道该如何配置了。...这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章： Gulp入门教程 一小时包教会 —— webpack 入门指南 Gulp 和 Webpack 集成 Gulp...('default', [ 'webpack']); 下面我们分别介绍一下 gulp 和 webpack 的配置 Gulp 配置 Gulp 中主要配置了两个任务：webpack 和 browserSync...browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。
、无效颜色值、无意义的浏览器前缀以及我们所配置的一些审查规则，我们可以根据自身项目的需求来设置不同的规则 图片 rules 使用 0, 1, 2 来代表规则启用状态不同，具体的规则可在 Rules.md...在 CSS 部分我们使用到了 stylelint 代码审查插件，而在 JS 部分也有类似的代码审查插件 gulp-jshint，需要注意的是，gulp-jshint 和 jshnt 要一起下载安装，其他一些插件也有类似的要求...()) .pipe(jshint.reporter(stylish)) }) 图片 图片 通过引入 browserify 插件，使得我们可以在浏览器中加载 Node.js...packfile.json 文件里进行配置，具体代码如下 图片 喜欢使用 ES6 的童鞋一定不能忘了引入 gulp-babel 插件 // babel.js const gulp = require...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面，更重要的是，可以同时在 PC、平板、手机等设备下进项调试，我们可以使用 Browsersync 提供的静态服务器，对我们的
在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：gulp此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考 gulp 教程之 gulp-livereload。...后来，我发现了 Browsersync。简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。...基于 gulp 的前端构建 之前使用 Grunt 时总结了一篇「基于 Grunt 的前端构建」。...在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。...当然在同时开上多个浏览器测试页面时它将会很有帮助。
，内部细节隐藏非常之深，你也不需关注细节，你只需要照着提供的API以及引入对应的loader和plugin使用就行。...搭建一个简单的前端应用 相比较webpack，其实gulp的项目结构更偏向传统的应用，只是我们借助gulp工具解放我们的一些代码压缩、es6编译、打包以及在传统项目中都可以使用less体验。...ejs方式 然后运行npx gulp taskImage 图片压缩得不小 在这之前，我们分别定义了三个不同的任务，gulp导出的任务有公开任务和私有任务，多个公开任务可以串行组合使用 组合任务 series...npx gulp seriseTask时 已经在dist生成对应的文件了 编译转换es6 在我们index.js，很多时候是写的es6，在gulp中我们需要一些借助一些插件gulp-babel,另外我们需要安装另外两个...用gulp写了一个简单的应用，但是发现中途需要找好多gulp插件，gulp的生态还算可以，3w多个star，生态相对丰富，但是有些插件常年不更新，或者版本更新不支持，比如gulp-image，当你按照官方文档使用最新的包时
友情提示：推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。...换句话说，只要把静态资源缓存下来，在缓存有效的时间内，用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”，可以发送关键字缓存到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:'./'
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师，使用它将提高您30%的工作效率。...安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js安装适用于Mac OS，Windows和Linux。...打开一个终端窗口，运行以下命令： npm install -g browser-sync 3.当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install...Image.png 您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制
如果在编辑器中对html文件增加或删除了元素，或者是在css文件中修改了某个元素的某个样式，然后想在浏览器中看到效果，通常的步骤是：把窗口切换到浏览器，然后按键盘上的F5刷新页面。...默认情况下,浏览器和编辑器并不会自动为你激活LiveReload的功能，你需要手动配置一些东西。所以这么麻烦，干脆看看还有没有别的解决方案。...更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。...可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。...browserSync.init()这行代码的init方法中，第一个参数我们需要传入一个配置对象，第二个参数我们需要定义一个回调方法。 proxy：代理服务端的接口地址。
STEP 3：使用生成器搭建我们的app 我们已经使用多次“脚手架”这个词，但是你可能还不知道它是什么意思。在 Yeoman的 语境中，脚手架材料表示通过一些配置为你的 webapp 生成文件。...的入口文件 conf：配置文件及第三方工具的父目录（Bowersync，Webpack，Gulp，karma） gulp_tasks 和 gulpfile.js：构建任务 .babelrc，package.json...，node_modules：配置以及所需依赖包 .gitattributes 和 .gitignore：git的配置 STEP 5：在浏览器中预览你的app 如果想要在你喜欢的浏览器上预览你的 web...即时加载的功能是通过配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 实现的。...STEP 7：使用 Local Storage 永久保存 todos 让我们重新看一下当刷新浏览器时 React/Redux mytodo 不能保存的问题。
PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器， 最后出现版本号就是装上了。 ? ...gulp和后边的横线是有空格的】 特别记得这个：--save-dev：这个就是装到局部的标志啊，以后在局部装插件也是少不了他的 在当前项目文件夹下安装gulp，只要你定位到那个目录下，就可以在那个目录下安装本地...其实感觉和jq的一样，就是”链式调用”，在这里呢人家叫”流式操作” 其他gulp api的代码意思见后边gulp api详解> 另外，需要哪个gulp插件的时可以去网上搜这个gulp插件，然后gulpfile.js...一个吊炸天的插件，多个浏览器实时测试：http://www.browsersync.cn 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass...http://www.ydcss.com/archives/702 Gulp自动加载和gulp-sass合用：http://blog.csdn.net/qq_33236453/article/details
arch ： 电脑系统是64位就写64,32位就写32 proxy ： 代理 3. nvm 配置 以控制台方法执行成功的，在环境变量里会自动配置了 NVM_HOME 和 NVM_SYMLINK ，这时候只要修改相应的路径就行了...若报错，那就重新把步骤再捋一遍。 检查环境变量是否配置成功：可以在控制台输入：set [环境变量名]，查看路径是否填写错误 5....Bower就是用来管理项目中所有的依赖，主要用于Web页面开发时使用的包管理，比如jquery，bootstrap Bower常用命令 1、初始化一个Bower的配置文件 --- $ bower init.../%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http...6、在Gulp中使用BrowserSync BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
原来用的React+Webpack时，那种同步压缩修改、实时动态刷新页面的感觉真的太棒了。...但如果使用Express+ejs+less的话，配置webpack非常繁琐，所以，一番折腾后，于是有了Express+Less+Gulp的配置方案，效果见下图，项目地址：https://github.com.../ycjcl868/Express_Gulp [image.gif] 目的 我使用Express+Ejs+Less开发，想开发时对所有资源进行压缩并同步到浏览器端，Google搜索一遍，都不是太符合我的项目要求...配置 下面说下我的配置方法： 我的目录结构： ├── app.js # Express Server ├── bin │ └── www # 启动Server ├── dist #.../ 目录下所有文档，有更新时强制浏览器刷新（需要浏览器插件配合或按前文介绍在页面增加JS监听代码） gulp.watch(['public/dist/**']).on('change', function
脚本） 代理服务器监听文件，不需要安装浏览器插件，只需安装node.js插件，局部刷新，可以实现手机浏览器和PC浏览器多个同步，包括视图同步和交互同步 安装node.js和插件： npm...，需要一点时间 编辑器按钮可以选择css文件 安装好google和sublime上的livestyle插件后，发现有时候运行不灵，浏览器右上方插件球变成黄色状态，怎么办？...情况3：修改不灵，还可能是css存放的文件夹名字或者层级有关（推测） 解决方法：有.css在当前页面引用的，在右上角小绿球里选择相应的css路径 使用整理说明： 1.livestyle...使用命令+谷歌浏览器： 在文件目录下 http-server 2.livereload使用命令+V**代理+谷歌浏览器： 在文件目录下 livereload gulp watch...3.browser-sync的使用命令,不用V**代理,各浏览器同步内容和交互： 在文件目录下 browser-sync start --server --files “**” gulp
LiveReload实现浏览器自动刷新 对页面进行样式更改之后，往往会多次刷新页面查看效果，对页面进行联调的时候更能体现出自动刷新的重要性，往往一个细节会花很多时间 使用条件： 谷歌安装LiveReload...工具； 用http-server配置静态服务器，打开网页 执行配置好的gulp，并且打开谷歌LiveReload工具 优化： 因为LiveReload并不是特别好使用，所以用 Browsersync 来替代...，可能还得指出具体位置； 组件强调复用，在重构新的页面时，对公共组件部分还得进行再重构，增加了重构的开发时间； 实现方式： HTML：Gulp-content-includer 将静态HTML进行模块化开发...刚开始在项目初期的时候，我们在每次联调或者重构完页面时，都需要通过前端或者开发进行协助将CSS及图片上传到对应环境中，最后因为实在太麻烦，重构也开始使用跳板机进行环境的上传。...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错 （2）package.json文件的作用 项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github...（3）项目依赖 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies...{ "gulp": "^3.9.1“ } } （5）package-lock.json文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度...，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
Browsersync /** *下面方法启用 bs，不传参则使用 laravel-mix 的默认配置 * 根据实际使用环境配置参数以获得更好体验 * bs 配置选项参考 https://www.browsersync.io...有别于一般的刷新（即整页相关资源重新加载），它可以只对发生变化的部分模块进行热替换，而其它部分保持不变。这使得它不仅反应及时，通常也能保持当前应用状态不会被刷新，这对于调试 SPA 项目十分方便。...Browsersync Hot Module Replacement LiveReload 刷新方式 修改 css 文件时为部分替换，其它整页刷新 模块热替换或整页刷新 整页刷新 监听范围 在配置项...files 规则所包含的前后端文件 前端模块（即 webpack 加载的模块） 浏览器当前页面所加载的前端文件 速度 修改 css 时较快，其它文件时一般 快，特别是热替换时 一般 可靠性 可靠 存在...） 个人日常使用习惯 因为 Browsersync 的可靠性与广泛适用性，它通常是我开发时使用的主力工具（甚至我为 hexo 与安装的 Browsersync 插件）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
