browser-sync

项目实战

由 感情迁移 提交于 2020-01-29 07:06:39
项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改，自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现（1） 17.导航条实现（2） 18.导航条实现（3） 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式（1） 38.footer布局和样式（2） 39

cannot get - 404 error when I edit my html files, and the browser gets reloaded

由 為{幸葍}努か 提交于 2020-01-24 19:44:14
问题 I serve my app with browser-sync in a gulpfile.js. When I edit my html files, when the browser gets reloaded, it says Cannot GET /find or whatever the url is to the page i am viewing. If I serve my app with npm run lite it doesn't have this issue. Why am I getting this issue? gulpfile.js: var gulp = require("gulp"); var sass = require("gulp-sass"); var sourceMaps = require("gulp-sourcemaps"); var del = require("del"); var typescript = require("gulp-typescript"); var tslint = require("gulp

Browsersnyc not auto reloading on changes made to css

由 偶尔善良 提交于 2020-01-06 15:51:13
问题 Got Browsersync to work with my Gulp file but I've really been struggling with getting browsersync to auto reload my static site when I make changes to the main.scss file. I've followed all the documentation on there webpage thoroughly and I still cant get page to auto refresh. I know parts of my integration with gulp are working because when I run my default gulp task which is linked to the browser-sync task a browser window fires up with the server but when I make s simple change to my main

Jhipster application development with Docker and gulp

由 若如初见. 提交于 2020-01-03 04:34:12
问题 I am working on a Jhipster application, and am running this application using docker. This is working, however its very cumbersome. I would like to be able to make UI changes (text, css, html etc) and benefit from gulp and browsersync, that is for example, make a change to an html file, save the file, and have the browser automatically refresh and show the change. However, the only way I can get changes visible in the browser is to: 1 stop the docker container 2 stop gulp 3 rebuild docker

How do I get gulp + browsersync to work an apache vhost?

由 ぐ巨炮叔叔 提交于 2020-01-01 09:43:50
问题 I'd like to add gulp, sass and browsersync to my toolkit. I'm now running gulp with a sass and browsersync task configured. I'm skinning a php app running from a vhost on my local apache server. I'm attempting to run browsersync from a watch task, using the browsersync's proxy option to use my vhost. Currently, when I run the watch no server can be found on port 3000. If I navigate to 'localhost:3000' I get chromes 'no web page found' message. If I navigate to port 3001 I can access

How to configure port in browser-sync

由 拜拜、爱过 提交于 2020-01-01 02:28:31
问题 I have a gulp task running with browser-sync ,by default its running on port 3000 of node.js server.I want to change the default port to any other port like 3010. var gulp = require('gulp'), connect = require('gulp-connect'), browserSync = require('browser-sync'); gulp.task('serve', [], function() { browserSync( { server: "../ProviderPortal" }); }); /*** 8. GULP TASKS **********/ gulp.task('default', ['serve']); I am using: browser-sync version-2.6.1 I tried configuring the gulp task like:

http-proxy-middleware, how to copy all/cookie headers

由 泪湿孤枕 提交于 2020-01-01 01:18:09
问题 I am using lite server by John Papa with HTTP proxy middleware by chimurai as a dev server. the problem is with my session cookie, I cannot persist the session cookie that comes from the real server. I saw this solution: https://github.com/chimurai/http-proxy-middleware/issues/78 but I see no resemblance to my bs-config.js: var proxy = require('http-proxy-middleware'); module.exports = { port: 3003, server: { middleware: { 1: proxy('demo/webservice/jaxrs', { target: 'https://localhost:8443',

Get livereload to work with Sails.js

由 别等时光非礼了梦想. 提交于 2019-12-29 06:25:17
问题 I am new to both Sails and grunt so I might be missing the obvious. I am trying to automatically refresh my sails app in the browser whenever files change . I start the app with sails lift and it runs on the default port 1337 . I tried adding options: {livereload:true} to my grunt-contrib-watch configuration but as far as I understand I need to somehow inject the livereload JavaScript into my page? I tried to use grunt-contrib-connect with the livereload option to inject the JavaScript but it

Browser sync reloading but CSS not changing with LESS and Gulp

由 99封情书 提交于 2019-12-25 14:09:12
问题 I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected to Browser Sync" but I'm not seeing changes occur in the browser. On a full manual reload with cache disabled I see the expected changes, so the css / less task seems to be working partially but I'm missing something on

Gulp-sass : scss file not compiled + variables

由 我们两清 提交于 2019-12-25 09:45:37
问题 I'm new on using Gulp and gulp-sourcemaps for sass files. I encouter an issue when compiling scss file. So I finally think sourcemaps is the guilt because when I open the last created css.map file, I don't find mention of my last scss file modified and compiled.(but not if I disable sourcemap creation). In addition, path to scss files in firebug isn't the right one.This is my gulp task: var basePaths = { src: './sass/**/*.scss', // fichiers scss à surveiller dest: './css/', // dossier à
订阅 browser-sync