换句话说，如果你在执行任务时只需要两个插件，那么其他不相关的插件就不会被加载。 WATCHING FILES Gulp可以监听文件的修改动态，然后在文件被改动的时候执行一个或多个任务。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...假设你正在开发单页应用的第4页，刷新页面就会导致你回到开始页。...使用LiveReload的话，你就需要在每次改变代码之后还需要点击四次，而当你修改CSS时，插入一些变化时，BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。 ?
，内部细节隐藏非常之深，你也不需关注细节，你只需要照着提供的API以及引入对应的loader和plugin使用就行。...中，任务之间的依赖关系需要我们自己手动写一些执行任务流，现在一些打包后的dist的文件并不会自动注入html中。...files: `${rootDir}/${targetDest}/*`, // 当dist文件下有改动时，会自动刷新页面 server: { baseDir:...创建的服务文件夹存在，不然页面打开就404错误 npm run server 至此gulp搭建一个简单的应该就已经完全ok了 这页面背景貌似有点黄 总结 gulpjs开发是一个任务流的开发方式，它的核心思想就是用自动化构建工具增强你的工作流...://browsersync.io/docs/gulp [3]api： https://www.gulpjs.com.cn/docs/api/src/ [4]code-example： https://
今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。...本文内容概要 1 为何不用npm，而选用cnpm 2 浏览器自动刷新 3 文件合并 4 CSS文件压缩 1 为何不用npm，而选用cnpm 原因：因为npm安装插件是从境外服务器下载，在境内受网络影响很大...，防止使用时出现问题；另外，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。...browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。...('dist/css')); }); 3.5 查看gulp-concat使用效果 4 CSS文件压缩 在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理，一方面可以提升网站的加载速度，另外一方面可以减少带宽
它经常用来进行一些前端任务，比如： 生成一个Web服务器 当一个文件保存时，浏览器自动刷新 编译像Sass或者LESS一样的预处理器 优化资源文件，像CSS,JavaScript和图片等 这些并不是Gulp...现在，我们需要同时运行watch和browserSync任务来进行实时加载。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器 让我们进入下一届，讨论优化资源文件的部分。...压缩图片，是一个极其缓慢的进程，除非必要，你是不会想重复的。为了做好这个，我们可以使用gulp-cache插件。
初次使用 Gulp 和 Webpack 可能不太适应，因为它们的配置可能让你看的一头雾水。不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。...这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章： Gulp入门教程 一小时包教会 —— webpack 入门指南 Gulp 和 Webpack 集成 Gulp...('default', [ 'webpack']); 下面我们分别介绍一下 gulp 和 webpack 的配置 Gulp 配置 Gulp 中主要配置了两个任务：webpack 和 browserSync...browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。...}, port: 80 }) }); // 配置需要监听的文件，当这些文件发生变化之后 // 将调用 browserSync.reload 使浏览器自动刷新 gulp.task
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js安装适用于Mac OS，Windows和Linux。...--save-dev browser-sync 4.BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。...browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync...Image.png 您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制
前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，...这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。.../web/js')); }); 实时刷新页面 gulp-livereload模块 gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。...它可以和gulp-watch插件或者前面描述的gulp-watch()函数一起使用。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。
Gulp 前端自动化构建工具 中，已经对 Gulp 有了初步的了解，我们通过将所有任务写到 gulpfile.js 文件中进行编译，这当然是最直观的方法，但当我们需要执行的任务过多时，gulpfile.js...default 默认任务 当我们运行 gulp 命令时，Gulp 将会执行 default 默认任务，而该任务具体代码如下所示： // default.js const gulp = require(...在 CSS 部分我们使用到了 stylelint 代码审查插件，而在 JS 部分也有类似的代码审查插件 gulp-jshint，需要注意的是，gulp-jshint 和 jshnt 要一起下载安装，其他一些插件也有类似的要求...，此外，我们还引入了 bundleLogger.js 和 handleErrors.js 两个文件，处理错误信息及记录绑定的过程，而 browserify-shim 插件则是能够帮助我们加载类似 jQuery...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面，更重要的是，可以同时在 PC、平板、手机等设备下进项调试，我们可以使用 Browsersync 提供的静态服务器，对我们的
在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。...gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
先看下前端现状 由于近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代完全迥异了。...Github HttpServer：https://github.com/indexzero/http-server 自动化构建工具GULP - 串起你的整个项目 GULP是个基于流的构建工具，使用nodejs...使用GULP，可以完成文件压缩，JS混淆，编译SASS，LESS 等，基本上你想要的功能，都可以通过代码实现。在项目，我还用GULP来下载文件，更新本地的JSON数据。...有关具体GULP的介绍，请参考GULP：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 珍惜键盘，远离F5 - Browsersync...页面仔每天做的最多的事就是，刷新浏览器，F5 or CTRL+F5 … 试想，当我写完HTML，CSS，JS 浏览就自动刷新，这真是飞一般的感觉。
所以gulp解决了开发效率(修改代码后自动更新页面)、资源整合(代码的压缩合并)、代码质量(代码的检查 自动化测试)、代码转换(es6-->es5)等问题 这里，我们需要知道gulp是怎样创建任务的。...默认情况下,浏览器和编辑器并不会自动为你激活LiveReload的功能，你需要手动配置一些东西。所以这么麻烦，干脆看看还有没有别的解决方案。...最终，我找到了它——browser-sync，以下是官方对它的解释： Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。...gulp-nodemon nodemon是一款非常实用的工具，用来监控你 Node.js 源代码的任何变化和自动重启你的服务器。
刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考 gulp 教程之 gulp-livereload。...后来，我发现了 Browsersync。简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。...以下代码是使用代理去实现： var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task...基于 gulp 的前端构建 之前使用 Grunt 时总结了一篇「基于 Grunt 的前端构建」。...当然在同时开上多个浏览器测试页面时它将会很有帮助。
换句话说，只要把静态资源缓存下来，在缓存有效的时间内，用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”，可以发送关键字缓存到HTML5学堂公众号。...因为在覆盖的过程中，静态资源和页面文件的部署有一定的时间间隔，对于一个大型网站来说即使时间间隔很小，都有可能出现新的用户访问。那在这个时间间隔内，用户访问网站会发生什么情况呢？...使用Gulp对静态资源的处理 安装：gulp-asset-rev和gulp-rev插件 命令行：cnpm install gulp-asset-rev和cnpm install gulp-rev 提醒：...浏览器自动刷新 gulp.task('f5', function(){ browserSync.init({ server:{ baseDir:'./'...另外，在其他项目也要使用Gulp的时候只要把gulpfile.js和package.json拷贝过去，再初始化Gulp就行了，而不用命令行来安装Gulp插件。
4. 检测安装结果 打开控制台，输入：nvm -v,若是出现版本信息，则安装。若报错，那就重新把步骤再捋一遍。...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可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。...*.css" 使用上面命令会开启一个迷你服务器，自动帮你打开浏览器，默认地址localhost:3000，默认打开index.html，如果没有，需要手动加上你要打开的页面，如localhost:3000
http-server 打开插件 这里不用ctrl+s保存，页面也能自动刷新 可以修改css，less，scss文件 google国内被墙了，可以通过国内镜像网站下载...("gulp"); var livereload = require("gulp-livereload"); var browserSync = require("browser-sync"); gulp.task...); gulp.src(file.path).pipe(livereload()) }) }); gulp.task('browser-sync',function(){ browserSync.init...使用命令+谷歌浏览器： 在文件目录下 http-server 2.livereload使用命令+V**代理+谷歌浏览器： 在文件目录下 livereload gulp watch...3.browser-sync的使用命令,不用V**代理,各浏览器同步内容和交互： 在文件目录下 browser-sync start --server --files “**” gulp
、 Hot Module Replacement 和 LiveReload 实现自动刷新。...有别于一般的刷新（即整页相关资源重新加载），它可以只对发生变化的部分模块进行热替换，而其它部分保持不变。这使得它不仅反应及时，通常也能保持当前应用状态不会被刷新，这对于调试 SPA 项目十分方便。...files 规则所包含的前后端文件 前端模块（即 webpack 加载的模块） 浏览器当前页面所加载的前端文件 速度 修改 css 时较快，其它文件时一般 快，特别是热替换时 一般 可靠性 可靠 存在...） 个人日常使用习惯 因为 Browsersync 的可靠性与广泛适用性，它通常是我开发时使用的主力工具（甚至我为 hexo 与安装的 Browsersync 插件）。...而 hmr 我通常只在调试 SPA 项目时使用，因为它响应速度快，而且通常不会影响应用状态，十分方便。
Yeoman 会自动搭建你的 app，获取依赖包。几分钟之后我们将进行下一步。 STEP 4：查看Yeoman生产的app的目录结构 打开你的 mytodo 目录，看一下脚手架搭建了什么。...，karma） gulp_tasks 和 gulpfile.js：构建任务 .babelrc，package.json，node_modules：配置以及所需依赖包 .gitattributes 和...即时加载的功能是通过配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 实现的。...它会监测你的文件的变化然后自动加载。...STEP 7：使用 Local Storage 永久保存 todos 让我们重新看一下当刷新浏览器时 React/Redux mytodo 不能保存的问题。
； 使用Compass，自动生成雪碧图并且CSS同时生成背景坐标，提升重构效率； 编写SASS公共方法，减少重复CSS代码，提升重构效率（包括compass自带方法函数）； 结合gulp构建工具，对雪碧图自动合并...LiveReload实现浏览器自动刷新 对页面进行样式更改之后，往往会多次刷新页面查看效果，对页面进行联调的时候更能体现出自动刷新的重要性，往往一个细节会花很多时间 使用条件： 谷歌安装LiveReload...工具； 用http-server配置静态服务器，打开网页 执行配置好的gulp，并且打开谷歌LiveReload工具 优化： 因为LiveReload并不是特别好使用，所以用 Browsersync 来替代...这里好处我不一一列举，可以查看 Browsersync官方文档，有更详细的介绍。 其中也遇到了一些问题，因为是HTML和CSS都是编译生成，得需要去动态监听生成文件的改变，进行自动刷新。...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
其实感觉和jq的一样，就是”链式调用”，在这里呢人家叫”流式操作” 其他gulp api的代码意思见后边 另外，需要哪个gulp插件的时可以去网上搜这个gulp插件，然后gulpfile.js...，就输入 gulp，命令行会自动执行default任务，并按顺序执行'lint', 'sass', 'scripts'任务 三、盲区疑惑： 怎么卸载掉gulp（全局或本地的） 再次使用gulp，...'); 3 //var livereload = require('gulp-livereload'); 4 var browserSync = require('browser-sync').create... 比较经典的： 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/article
原来用的React+Webpack时，那种同步压缩修改、实时动态刷新页面的感觉真的太棒了。.../ycjcl868/Express_Gulp [image.gif] 目的 我使用Express+Ejs+Less开发，想开发时对所有资源进行压缩并同步到浏览器端，Google搜索一遍，都不是太符合我的项目要求...gulp'); var minify = require('gulp-clean-css'); var browserSync = require('browser-sync'); var nodemon.../ 目录下所有文档，有更新时强制浏览器刷新（需要浏览器插件配合或按前文介绍在页面增加JS监听代码） gulp.watch(['public/dist/**']).on('change', function...gulp build将文件压缩、打包、编译，然后再执行gulp开启自动更新服务器。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
