npm install --save-dev gulp-connect npm install --save-dev gulp-livereload npm其他,前面已有 var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); var paths = { src : "src/", css : "src/css/"…

问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结合两者使用,查看教程 简单说一下: 1. install npm 2. install gulp 3. install bowerSync 4. touch gulpfile.js var gulp = require('gulp'); var browserSync = require('brow…

gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图片压缩 npm install -g gulp-jslint js代码校验 慎用 npm install -g gulp-minify-css css压缩 npm install -g gulp-minify-html html压缩 npm install -g gulp-uglify js压缩 它…

webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入. Output(出口):指示 webpack 如何去输出.以及在哪里输出 Module(模块):在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk(代码块):一…

我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我对前端进阶学习的一点思考. 一.漫谈 刚入职不久阿里巴巴就上市了,这是件振奋人心的事情.实际上在正式入职之前,我就已经在淘宝UED实习了三个月,所以这边的工作环境和开发流程都比较熟悉了. 在工作中,遇到了很多这样的场景: 1. 线上 bug 处理 运营:“嘿,小胡子,有客户反馈这个提交表单的页面中,…

gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. 使用npm install --save-dev gulp本地安装gulp依赖. 根目录下新建gulpfile.js. 按照编程的尿性,先试一下hello world: var gulp = require('gulp'); gulp.task('hello', function() { cons…

目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安装gulp依赖 1.3.3 npm安装gulp依赖 1.3.3 创建gulpfile.js 1.3.4 运行任务 2. gulp API 2.1 gulp.task( name[, deps], fn ) 2.2 gulp.watch( glob[, opts], tasks ) 2.3 gulp.…

(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任务,比如: // 引入 gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint'); var less = require('gulp-less'); var concat = require('gulp-…

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用…

gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 Gulp Gulp简介 链接: http://gulpjs.com/    官网 http://www.gulpjs.com.cn/   中文网 就是用来机械化的完成重复性质的工作 gulp的机制就是将重复工作抽象成一个个的任务, 4.2.Gulp准备工作 安装Node.js 安装 gulp 命令行…

博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 现在,移动端开发的火爆,以及前端工程越来越复杂,所以出了很多的自动化构建工具.gulp等就是最好的代表,如果你是前端新手初次接触gulp,又不想看太官方的解释又想学习学习gulp的相关知识的话那么这篇文章很适合你,喜欢的话也希望你们可以点个赞,不喜欢的也不要喷,毕竟我也不是前端大牛,只是想把自己使用…

一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init 初始化 生成package.json 2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org:  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误: 2.定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp…

gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_JZZOw 提取码:ec9b (2)也可以创建一个这个文件,内容如下: // http://www.gulpjs.com.cn/var gulp = require('gulp');var browserSync = require('browser-sync');var reload = brows…

前言 最近读勒基本关于前端的数据<JavaScript核心技术开发解密>,<webpack从入门到进阶>...这几本书帮助到我更好的理解JS.webpack在前端技术领域中的作用.以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等... 这本书先从<JavaScript核心技术开发解密>开始讲解,分为两篇讲完,读完本篇你能学到: 前端进阶必读:<JavaScript核心技术开发解密>核心提炼一 前端进阶必读:&l…

目录 前言:为什么要学习这个方法 compose简介 compose的实现 最容易理解的实现方式 手写javascript中reduce方法 redux中compose的实现 参考文章 最后 前言:为什么要学习这个方法 遇到这个方法主要是最近在阅读redux,koa 原理 等多次遇到这个方法,为了更好地理解框架原理,于是深入学习了一下compose的实现. 然后也发现这属于函数式编程的东西,发现函数式编程是进击前端进阶的必经之路,因为像其中的纯函数的概念在redux的reducer中也展示得淋漓…

前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片等几方面介绍具体的优化操作. 目录: 1. 服务器优化 1.1. 使用内容分发网络(CDN) 1.2. 服务器使用http2.0协议 1.3. GZIP压缩 1.4. 使用浏览器缓存 1.5. 设置ETag 2. HTML内容优化 2.1. 减少HTTP请求数 2.2. 减少DNS查找 2.3. 避…

前端进阶(2)使用fetch/axios时, 如何取消http请求 1. 需求 现在前端都是SPA,我们什么时候需要取消HTTP请求呢? 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求 某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消HTTP请求 对于原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort() 那么,当我们使用ES…

css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱化与 js 的强化. 之前有写过一篇 CSS 模块化,但对 css in js 这种理念没有过多讲解,所以这次深入一下. css in js 理念,即是摒弃原有的用 .css 文件书写样式,而把样式写进 js 里面,这样就可以做到一个组件对…

使用方法: 下载 node.js , https://nodejs.org/en/,并安装 msi 一下命令都属于 dos 命令 node -v,npm -v,检验是否下载成功(出现版本号) 将 npm 镜像到淘宝 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后用 cnpm 代替 npm使用 原因是 npm 是国外服务器 安装 gulp 到全局 cnpm install gulp -g 检验安装 gulp -v…

1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本  npm -v 查看npm版本 选装cnpm 1.1.说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常, 如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网: “这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为  10分钟 一次以保证尽量…

原文:转:Java IDE 编辑器 --- IntelliJ IDEA 进阶篇 生成 hibernate 实体与映射文件 2011-04-30 12:50 很多人不知道怎么用 IntelliJ IDEA 编辑器生成 Hibernate 实体映射文件,很多人认为 IDEA 不支持此功能,或者需要安装特定的插件才能完成该操作.实际上 IDEA 支持该功能也无需安装IntelliJ IDEA插件. 以下为 IntelliJ IDEA 编辑器生成 Hibernate 实体映射文件过程和截图. 这里数据库…

http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必备配置.特别是在写前端页面的时候,不用再频繁去点浏览器刷新按钮.工作的时候把浏览器拖到扩展屏,保存文件实时看到变化,特别提高开发效率. 而且livereload插件非常人性化,在检测到不需要重刷新浏览器运行的文件,例如css文件变化时,直接在页面里重载文件,而不刷新页面.使效果反应非常快捷. 下面是…

gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前端的构建工作. 项目结构: 首先全局安装gulp,使用命令:npm install -g gulp 一:gulp实时编译less var gulp = require('gulp'); var gulpLess = require('gulp-less'); var gulpMinifyCss =…

今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gulp.src:读取文件 gulp.pipe:将文件流输入到指定的文件目录 gulp.task:建立gulp任务,例如合并,压缩,清除文件, gulp.watch:用于监听文件的变化 关于其他的嘛,那就是gulp 之所以那么强大,原因就是他有很多插件,我们要完成一些功能就必须要学会使用一些插件 1)在…

首先说一下我遇到这个情况的代码情景,首先上错误代码 UserInfo userInfo = Session["UserInfo"] as UserInfo; ); 这段代码所呈现的问题正如题目,数据库值变化,前台页面并不变化,刷新也不变化,重新运行程序则变化. 断点调试----看到无论如何更新,查出来的attentionTopicInfos的内容也没有任何变化. 最后想到----userInfo是从Session中取出的,session储存的用户登录信息,内容并不查询更新. 而我们所需…

自动刷新 CSS文件 使用任何代码工具码 CSS,都是需要保存后再切换到浏览器按 F5 刷新查看效果,一次又一次,不管这个改动仅是一个小小的颜色.使用 CSSrefresh 后,改动 CSS 文件保存后,直接看浏览器就好了! 省去了: 切换到浏览器按 F5 刷新查看效果.这对码 CSS 习惯不停刷新查看效果的开发人员来说绝对是利器,省却的时间不是一点两点. CSSrefresh 是一个 JavaScript 库,用来实现无需刷新页面立即更换网页样式效果的功能,即插即用无需配置,只需要在页面中引入…

被新手问到了“IDEA如何刷新pom文件?”这个问题,想来这是一个不好意思问的常犯的错误吧. 在IDEA中,修改了pom.xml文件,添加了依赖以后,一般会弹出以下这个警告来. 点击[Import Changes]就好了,开始从本地仓库里找,如果没有就从远程仓库下载,所以可能会等一段时间. 如果这时不小心点错了, 可以在[Maven Projects]目录下点击那个刷新的符号[Reimport All Maven Projects](也可以在菜单中查找这个选项).点击后就会刷新依赖目录[Depe…

GO语言的进阶之路-Golang字符串处理以及文件操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们都知道Golang是一门强类型的语言,相比Python在处理一些并发问题也是有过之而无不及,甚至可以说远远的甩python几条街.学过python基础或是shell的童鞋应该知道我们在定义一个变量的时候是不需要指定其所属数据类型的,直接让其等于一个变量即可,他们的解释器会自动识别你定义的是个整数,浮点数,字符串,还是数组或是函数.而Golang在定义每个变量的时候都被指定…

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化…

学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,…