作为一名码农，更作为一名页面仔，我只想说：哪一个程序员，不想在写代码的时候偷点懒？当然这个懒，不是指那种当个纯粹的搬运工（CTRL+C,CTRL+V大神）,而是用更少的时间去完成日常的工作任务。...在我理解看来，一直把LESS，SASS还有其他的比如PostCSS看成一种工具，没当成语言来看待，就是为了让CSS可编程，更方便的去写CSS，更好的管理CSS，然后编译生成CSS。...有关具体GULP的介绍，请参考GULP：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 珍惜键盘，远离F5 - Browsersync...Browsersync官网：https://www.browsersync.io/ 光说不练假把式 - 手把手带你起飞 STEP-1：准备好各种环境 首先你得有nodejs环境，然后你得全局安装GULP...，http-server,browsersync，如下所示： ?
= 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...// CSS文件压缩 gulp.task('cssMin', function() { // 需要压缩的CSS文件 gulp.src('css/*.css') // CSS文件压缩...安装好的插件 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
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...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({
taskJS 至此你会发现dist目录下就有生成的js了 安装less npm i less gulp-less --save-dev 在css/index.less中写入测试css的代码 @bgcolor...申明的变量就变成了es5了 通常情况下，一般打包后的dist下的css或者js都会被压缩,在gulp中也是需要借助插件来完成 压缩js与css 压缩js ... const teser = require...html中 在gulp中，任务之间的依赖关系需要我们自己手动写一些执行任务流，现在一些打包后的dist的文件并不会自动注入html中。...参考browser-sync[2] const { src, dest, series, watch } = require('gulp'); const browserSync = require(...://browsersync.io/docs/gulp [3]api： https://www.gulpjs.com.cn/docs/api/src/ [4]code-example： https://
在我们的例子中，就是app文件夹： gulp.task('browserSync',function(){ browserSync.init({ server: {...baseDir:'app' }, }) }) 我们也需要稍微改变我们的sass任务，让Browser Sync能够注入新的CSS样式（更新CSS）到浏览器，当sass任务运行时。....pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })) }...这个将要笨重的打开两个命令行窗口以及独立运行gulp browserSync和gulp watch，所以，让我们使用Gulp来让他们一起运行，通过告知watch任务，browserSync必须在watch...// other watchers }); 现在，如果你在命令行中运行gulp watch,Gulp会同时开启sass和browserSync任务。
LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包 gulp.task('style', function() { // 这里是在执行style任务时自动执行的 gulp.src(....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(...gulp-uglify：压缩js文件 gulp-rename：重命名文件 gulp-cssnano：css压缩 gulp-htmlmin：压缩html gulp-imagemin：压缩图像 brower-sync
browserSync = require('browser-sync').create();// HTML 任务function html() {return gulp.src('index.html...') .pipe(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.watch('index.html', gulp.series("html")); gulp.watch('css/main.css', gulp.series("css"));
一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...使用LiveReload的话，你就需要在每次改变代码之后还需要点击四次，而当你修改CSS时，插入一些变化时，BrowserSync会直接将需要修改的地方添加进CSS，就不用再点击回退。 ?...实际上BrowserSync对于Gulp并不算一种插件，因为BrowserSync并不像一个插件一样操作文件。然而，npm上的BrowserSync模块能在Gulp上被直接调用。...此外BrowserSync的开发者还写了很多关于BrowserSync+Gulp仓库的其他用途。 Why Gulp?
/config').watch; gulp.task('watch', ['browsersync'], () => { gulp.watch(config.styles, ['styles'...这一插件集合，在这里想要跟大家介绍的是，PostCSS 是一个使用 JS 解析样式的插件集合，它可以用来审查 CSS 代码，也可以增强 CSS 的语法（比如变量和混合宏），还支持未来的 CSS 语法、...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面，更重要的是，可以同时在 PC、平板、手机等设备下进项调试，我们可以使用 Browsersync 提供的静态服务器，对我们的...gulp'), browsersync = require('browser-sync'), config = require('../...../config').browsersync; gulp.task('browsersync', ['build'], () => { browsersync.init(config.development
//outPutPathName: String .pipe(gulp.dest(outPutPathName)); 压缩~CSS代码(合并-重命名-输出同上) 压缩： gulp-minify-css;...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。...// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css" 在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器...，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。...browser-sync start --proxy "Browsersync.cn" "css/*.css" 参考博文：BrowserSync，迅捷从免F5开始。
('dev/css')); }); 比较一下 Grunt 与 gulp 编译同一套 sass 代码下所花费的时间： 并不是说 Grunt 就比 gulp 不好，也有 gulp 办不到...后来，我发现了 Browsersync。简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。...以下代码是使用代理去实现： var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task...('*.html').on('change', browserSync.reload); }); 运行命令，默认的浏览器会自动打开 127.0.0.1:3000 链接 gulp serve...// 打包 css 文件 gulp.task('build:css', function(cb) { runSequence( 'usemin:css', 'sass
('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
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：经测试发现，外部字体图标的css引入会引起服务器地址的错误，浏览器中修改样式，发现样式改变在bolb：http中。...情况3：修改不灵，还可能是css存放的文件夹名字或者层级有关（推测） 解决方法：有.css在当前页面引用的，在右上角小绿球里选择相应的css路径 使用整理说明： 1.livestyle
如果在编辑器中对html文件增加或删除了元素，或者是在css文件中修改了某个元素的某个样式，然后想在浏览器中看到效果，通常的步骤是：把窗口切换到浏览器，然后按键盘上的F5刷新页面。...gulp browser-sync gulp-nodemon gulp gulp是基于Node.js的前端自动化构建工具，能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试...最终，我找到了它——browser-sync，以下是官方对它的解释： Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。...const gulp = require('gulp'); const browserSync = require('browser-sync').create(); const nodemon = require
引入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:'./'...', function () { // 需要合并的文件 gulp.src('css/*.css') //合并后的文件名 .pipe(concat('common.css'...() { // 需要压缩的CSS文件 gulp.src('css/*.css') // CSS文件压缩 .pipe(cleanCSS()) // 压缩后的C文件所在的文件夹
": "^3.9.1", "gulp-cache": "^0.4.5", "gulp-clean-css": "^2.3.2", "gulp-concat": "^2.6.1",...gulp'); var minify = require('gulp-clean-css'); var browserSync = require('browser-sync'); var nodemon...('dist/css/')); }); // 压缩js gulp.task('js', function () { return gulp.src('public/js/**/*.js')...*","dist/css/*.*","dist/js/*....// 监听所有css文档 gulp.watch('public/less/*.less', ['less']); // 监听所有.js档 gulp.watch('public
'); 7 var rename = require('gulp-rename'); 8 //如下示例，加一个转css的任务： 9 // 检查脚本，纠错 10 // 11 gulp.task('lint.../css')); 22 }); 23 24 // 合并，压缩文件 25 gulp.task('scripts', function() { 26 gulp.src('..../css')); 8 9 }); 1．关于gulp task //理解了gulp的task，就理解了gulp，其核心就是task。...一个吊炸天的插件，多个浏览器实时测试：http://www.browsersync.cn 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass...css将注入到浏览器里实现更新 21 gulp.task('sass', function() { 22 gulp.src("scss/*.scss") 23 .pipe(sass
，并且打开谷歌LiveReload工具 优化： 因为LiveReload并不是特别好使用，所以用 Browsersync 来替代LiveReload，Browsersync的功能更全更方便。...这里好处我不一一列举，可以查看 Browsersync官方文档，有更详细的介绍。 其中也遇到了一些问题，因为是HTML和CSS都是编译生成，得需要去动态监听生成文件的改变，进行自动刷新。...利用gulp实现include双向绑定，更改include同时会更新完整静态html，并且浏览器会检测更改自动刷新 CSS：SASS CSS模块通过SASS进行组件化区分，避免引用多余的组件样式 搭建...CSS 为什么不将CSS合并与压缩功能做在gulp中，却做到管理端上？...如果做到gulp中，会不方便后期的改版维护，在发布时，因为都是压缩过的CSS代码，不便和线上进行对比。虽然有SVN，但是为了保证一切以线上为主的基础，还是会对线上的代码进行对比。
gulp是引入开发过程中的一些小工具，生产模式不需要gulp 本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了.../%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http...：npm install gulp-uglify --save-dev Css压缩：npm install gulp-cssnano --save-dev Html压缩：npm install gulp-htmlmin...gulp-connect 合并文件：gulp-concat 最小化 js 文件：gulp-uglify 重命名文件：gulp-rename 最小化 css 文件：gulp-minify-css 压缩html...6、在Gulp中使用BrowserSync BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
/src/css/base.css') // 将处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') .pipe(gulp.dest('dist/css')); }); // html任务 // 1.html文件中代码的压缩操作 // 2.抽取html...('dist')); }); // css任务 // 1.less语法转换 // 2.css代码压缩 gulp.task('cssmin', () => { // 选择css目录下的所有less...文件以及css文件 gulp.src(['....：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify ：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
