本文内容概要 1 为何不用npm，而选用cnpm 2 浏览器自动刷新 3 文件合并 4 CSS文件压缩 1 为何不用npm，而选用cnpm 原因：因为npm安装插件是从境外服务器下载，在境内受网络影响很大...安装：$ npm install cnpm -g --registry=https://registry.npm.taobao.org； 提醒：安装完后最好查看其版本号cnpm -v或关闭命令提示符再重新打开...= 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...('dist/css')); }); 3.5 查看gulp-concat使用效果 4 CSS文件压缩 在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理，一方面可以提升网站的加载速度，另外一方面可以减少带宽
任务被执行时可以用Gulp来加载或者更新网页。...LiveReload和BrowserSync插件就可以用来实现在游览器中加载更新的内容。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BROWSERSYNC BroserSync在浏览器中展示变化的功能与LiveReload非常相似，但是它有更多的功能。...当你改变代码的时候，BrowserSync会重新加载页面，或者如果是css文件，会直接添加进css中，页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。...假设你正在开发单页应用的第4页，刷新页面就会导致你回到开始页。
watch-compile.gif 让我们来进行下一步，以及让Gulp重新加载浏览器，当我们保存一个.scss文件，通过Browser Sync。...现在，我们需要同时运行watch和browserSync任务来进行实时加载。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...2.使用Sass编译器 3.当文件改变后，自动重新加载浏览器 让我们进入下一届，讨论优化资源文件的部分。...组合Gulp任务 让我们总结一下我们做的吧。到目前为止，我们创建了两个不同Gulp任务集。 第一个任务集是一个开发进程，我们可以用它编译Sass到CSS，监视文件的修改，从而重新加载浏览器。
Vue刷新页面重新加载 问题描述 在加载同一路由页面的时候，vue的页面默认是不刷新的，需要重新加载数据 解决方案 修改App.vue 在路由视图上添加一个变量isRouterAlive判断显示实现重新加载.../showDetail',query:{id:val}}); this.reload() } }, created(){ //加载数据...$message({type: "error",message: "加载数据出错:"+err, }) }); } } 版权声明：本文内容由互联网用户自发贡献，
gulp-load-plugins模块 一般情况下，gulpfile.js中的模块需要一个个加载。...('build')); }); 上面代码中，除了gulp模块以外，还加载另外三个模块。...这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。...一旦监测到变化，就会生成css并保存，然后重新加载网页. BrowserSync 安装 BrowserSync 您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。...，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
('gulp');const cssmin = require('gulp-cssmin');const uglify = require('gulp-uglify');const browserSync...(browserSync.stream());}// CSS 任务function css() { return gulp.src('css/main.css') .pipe(cssmin())...gulp.src('js/main.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) .pipe(browserSync.stream...bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAx8ppTCeTTAs0pnLlR4t8Q...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。
JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包，因为这个包提供了一些API var gulp = require('gulp'....pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(browserSync.reload({ stream....pipe(browserSync.reload({ stream: true })); }); var htmlmin = require('gulp-htmlmin')...; // 4....: true, removeComments: true })) .pipe(gulp.dest('dist')) .pipe(browserSync.reload(
('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
/config').watch; gulp.task('watch', ['browsersync'], () => { gulp.watch(config.styles, ['styles'...(size()) }) 图片 图片 细心的童鞋可能发现了，在 production 目录下有 4 个 optimize.js 文件，分别是对应 HTML CSS JS Images 文件，尽管我们建立这些任务...()) .pipe(jshint.reporter(stylish)) }) 图片 图片 通过引入 browserify 插件，使得我们可以在浏览器中加载 Node.js...jQuery 或 Modernizr 的非 CommonJS 文件 // script.js const gulp = require('gulp'), browsersync.../config').browsersync; gulp.task('browsersync', ['build'], () => { browsersync.init(config.development
const taskBuild = seriseTask; // 本地服务 const taskDevServer = () => { // 监听public所有目录下，只要文件发生改变，就重新加载...重新组织gulpfile 最后我们可以再重新组织一下gulpfile.js，因为多个任务写在一个文件里貌似不太那么好维护，随着业务迭代，会越来越多，因此，有必要将任务分解一下 在根目录新建task，我们把所有的任务如下...rootDir}/${targetDest}` // 基于当前dist目录 }, ...options } // 监听public所有目录下，只要文件发生改变，就重新加载...本文示例code-example[4] 参考资料 [1]gulp-inject： https://www.npmjs.com/package/gulp-inject [2]browser-sync： https...://browsersync.io/docs/gulp [3]api： https://www.gulpjs.com.cn/docs/api/src/ [4]code-example： https://
browser-sync 3.当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install --save-dev browser-sync 4....browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync...Image.png var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload...= browserSync.reload; // 静态服务器 // 设置静态目录 gulp.task('start', function() { browserSync.init({.../static/*.html").on('change', reload); }); 4.全部开启远程调试： ? Image.png ? Image.png 5.找到自己的IP地址： ?
当对该模块进行更改后，即使重新导入，其中的任何改变都不会被识别，这使得模块调试变得非常困难。 那么，该如何解决这个问题？ | 版权声明：一去、二三里，未经博主允许不得转载。...重新加载模块 倘若，更改了已经在 Python shell 中导入的模块，然后重新导入该模块，Python 会认为“我已经导入了该模块，不需要再次读取该文件”，所以更改将无效。...要解决这个问题，有以下几种方式： 最简单、最有效的方法：重新启动 Python shell。但是，这也有缺点，特别是丢失了 Python shell 名称空间中存在的数据以及其他导入模块中的数据。...对于更复杂的情况，重新加载被编辑的模块也需要重新加载其依赖/导入的模块（因为它们必须作为被编辑模块初始化的一部分进行初始化），所以 IPython 的 autoreload 扩展很有用。
为了让用户能够快速的访问网站，开发人员会对网站的静态资源做缓存处理，这样可以减少网站静态资源的加载。...换句话说，只要把静态资源缓存下来，在缓存有效的时间内，用户访问网站时静态资源是从浏览器缓存里面加载而不是从服务器加载过来。如果想进一步了解“网站缓存”，可以发送关键字缓存到HTML5学堂公众号。...引入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:'./'
有时候命令行好几页了，用它一键清空） ../ 也可以返回上一级目录 有这几个命令就够用了，另外别问我怎么回到全局(后来发现我的电脑是直接按 C: 回车就可以，不知道其他的)，我都是点了cmd右上角的叉叉然后重新打开的...一个吊炸天的插件，多个浏览器实时测试：http://www.browsersync.cn 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass...'); 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
前言 当应用配置文件发生变化时，无需重启tomcat，可以使tomcat重新加载应用。...其二：修改配置文件，执行命令：touch TOMCAT_HOME/webapps/A/WEB-INF/web.xml，让tomcat重新加载应用A。...原理 当然，修改配置之后重启tomcat这个方式不难理解，应用重新被部署，肯定会使用到最新的配置。 那么，对于不需要重启tomcat，而是让tomcat重新加载应用，低层的实现原理是什么呢？...那么，是不是可以理解为一旦tomcat监测到应用的描述文件web.xml发生变化之后就会主动重新加载应用呢？ 如下是一个实际的tomcat重新加载应用的输出日志。...后台线程通过检测该文件的时间戳是否发生变化，从而确定是否需要重新加载应用。
是一个异步任务，所以我们需要series来进行调用 示例： const build = series(clean, parallel( compile, extra )) 复制代码 自动加载插件...随着我们的插件引入越来越多，我们的代码随着也需要引入许多的依赖，这样对我们的维护来说就会变的复杂，好在 gulp给我们提供了gulp-load-plugins的依赖包 yarn add gulp-load-plugins...require('gulp-babel') // 模板 const swig = require('gulp-swig') // 图片、svg压缩 const imagemin = require('gulp-imagemin...> { return sass } } }) 复制代码 热更新 不多比比直接上 npm i browser-sync --dev 复制代码 gulpfile.js const browserSync...= require('browser-sync') const bs = browserSync.create() ... const serve = () => { bs.init({
为防止两个模块互相导入的问题，Python默认所有的模块都只导入一次，如果需要重新导入模块， Python2.7可以直接用reload()，Python3可以用下面几种方法： 方法一：基本方法 from
在jupyter中用python写程序，若import了自己写的外部模块，如果这个外部模块有更新，再次执行import，jupyter是不会重新导入的。...一般的做法是先restart整个jupyter文档，再重新执行代码，以确保所有导入的外部模块都是最新的。但这种做法太麻烦，效率也不高。...在jupyter下实现模块重新加载（每一次运行import，都导入模块最新的代码），有三种方式： 对于 Python2.x import some_module reload(some_module...版本更新和降低版本命令 安装更高的版本： pip install -U “notebook 6.0” 降低版本 pip install -U “notebook<5.0” 以上这篇jupyter实现重新加载模块就是小编分享给大家的全部内容了
有关具体GULP的介绍，请参考GULP：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 珍惜键盘，远离F5 - Browsersync...Browsersync给你想要的，甚至还它还内置了移动端调试神器WEINRE，简直不要太diao。...Browsersync官网：https://www.browsersync.io/ 光说不练假把式 - 手把手带你起飞 STEP-1：准备好各种环境 首先你得有nodejs环境，然后你得全局安装GULP...，http-server,browsersync，如下所示： ?...STEP-4：体验一把做懒人的感觉O(∩_∩)O ? STEP-5: 懒人第一阶段完成，好了不写了，我要去好好搬砖了
（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...package.json 文件的 dependencies 字段中 { "dependencies": { "jquery": "^3.3.1“ } } （4）...install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中 { "devDependencies": { "gulp...} （5）package-lock.json文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
