1.需要本地安装node; 2.安装gulp: 3.在项目根目录启动node; 安装babel组件: npm install --save-dev babel-core npm install --save-dev gulp-babel babel-preset-env 5.配置gulp任务: --gulpfile.js //ES6语法 编译 gulp.task('es6', () => gulp.src('src/app.js') .pipe(babel({ presets: ['env']…

一年前翻译了本文的一部分,最近终于翻译完成.虽然此设计思想的提出已经好几年了,但是还是觉得应该在国内推广一下,让大家知道“内容策略”,“移动优先”,“响应式设计”,“原子设计”等设计思想和技术的根源.这些概念最早其实是由luke wroblewski,brad frost等人在同一个设计思想框架下提出的.笔者经“面向未来的友好设计(Future Friendly Web Design)”设计理念联合创始人Jason Grigsby授权,将此设计思想框架首次翻译为中文版本. 能力所限,敬请指正,欢…

Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里.前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS.解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子). Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜…

作为一种全新的开源和跨平台的开发平台,.NET Core 历经两年多的开发,终于在于2016年6月27日针对所有主流服务器和桌面操作系统发布 1.0 RTM 版本..NET Core 是一种通用开发平台,它包含了自动内存管理和现代化高级开发语言等重要特性,这些都能让面向多个平台开发静态类型的高质量应用程序变得轻松..NET Core 本身采用 MIT 协议开源,因此可以免费用于各种类型的商业和闭源项目. 全新的 .NET Core 不同于内置于 Windows 系列操作系统上的 .NET 框架,…

使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器又没有同步更新版本,或者是新版本的浏览器没有对ES6的特性进行兼容,那浏览器肯定是无法识别我们所写的ES6代码,所以假如想直接编写ES6代码在浏览器执行,结果由于兼容性问题只能是报错.那么浏览器不支持,而我们又想用ES6语法编写JS代码怎么办,针对这个问…

iOS开发请您把握现在 — 面向未来学习 这一篇文章,如果你是一名iOS开发正好也处于开发晋升瓶颈迷茫期,不妨停下你的脚步,花五分钟看看,兴许有你需要的!文章结尾有彩蛋 群里常见的唱哀 iOS现在到底怎么了?不行了么? 许多年开发经验了在金九银十拿不到几个面试邀请,`offer`也困难 现在要不要转行,感觉现在是`大前端时代`. 现在年纪大了,是不是不太合适继续做程序员! 到处都充满了对iOS行情的焦虑 一.分析iOS市场 一个成熟的IT开发人员必须要冷静的思考,学会 —— 迎接焦虑 - 变压力…

1.安装gulp  npm install gulp 2.得到package.json文件  npm init 2.全局安装Babel. npm install -g babel-cli    npm install -g babel-cli --save-dev 3.Babel的配置文件是.babelrc ,windows下新建该文件会提示必须键入文件名,解决办法是文件名如下.babelrc. 4.ES2015转码规则  npm install --save-dev babel-preset-…

1.gulpfile.js var gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/**/*.js') .pipe(babel({ presets: ['es2015'], plugins:['babel-plugin-transform-es2015-modules-amd'] })) .pipe(gulp.dest('d…

目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre…

ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用ES6,一方面积累一些经验为大型项目做准备.另一方面小型的活动专题不涉及后期维护,从成本上我并没有冒太大的风险.下面我简单介绍一下我搭建的ES6 环境. 虽然移动平台是webkit大行其道,并且webkit对ES6支持的还不错,但是我并不打算webkit内核裸跑ES6.我选择了预编译的方案——babe…

最近一直在做weex的调研工作,整理之后给公司做了一次技术分享. 分享内容如下: 1:Weex是什么? 2:  Weex目前能做什么? 3:  Weex 如何调试 4:  剖析一下Weex原理 5:  跨平台通用组件 6:  Weex的未来发展 1:weex 是什么? 进入到官网:http://alibaba.github.io/weex,简单明了的几个词,揭开了weex的神秘面纱 : write once run everywhere  &&  Native Speed in Nativ…

环境: "@babel/core": "^7.1.6", "gulp-babel": "^8.0.0", "@babel/preset-env": "^7.1.6", 很大程度是babel的配置信息写错, 正确的写法: { "presets": ["@babel/env"] } babel 7 以后的版本名称做了调整, 所以配置中的名称也需要调整,…

一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的沟通和消耗. 闲鱼团队 在去年做了一个很特别的黑科技 基于图片直接翻译成对应的UI侧代码,具体完成的部分,我们有一个演示的视频 很多人会比较好奇,为什么我会坚持使用图片做为输入源,一方面基于 sketch 或者 photoshop 等插件 相对容易拿到确定性的信息,图片在某些方面容易丢失一些特征:另…

2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点就是感觉没必要,还有一点就是难控制.为什么这么说呢?作为刚入门的人来说,第一写的代码就少,平时也不会感觉到代码有什么问题,等开发多了,虽然感觉到问题了,但是你还是很难去按照面向对象的思维去写,因为按照面向对象去思维写需要你把握全局观,更是面向未来编程,把握不好,越写越乱.所以很多新手一直都还是按照面…

1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g rimraf gulp 项目下新建package.json和gulpfile.js. 打开package.json添加 {}  花括号,保存. 2.gulp插件(每个项目都要安装一次)cnpm install --save-dev gulp gulp-repla…

什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框架. Everything is an element,一切皆组件,是polymer的核心思想 polymer 可以通过Twitter的包管理器bower,方便的进行组件(Elements)及包的依赖管理,不必自己从git上下载组件. polymer分层结构: 元素层(Elemets), 分为UI…

起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-babel,babel-preset-es2015. 备注:只介绍基于node,gulp下的babel编译es6.node安装请自行网搜.npm转淘宝镜像cnpm请自行网搜. 开始:创建项目文件夹:打开命令行工具:右键开始菜单--运行--输入cmd--回车. 1:检验node是否安装成功:输入    (有…

var gulp=require('gulp'), babel = require('gulp-babel'), gulpSequence = require('gulp-sequence'), htmlmin = require('gulp-htmlmin'), sftp= require('gulp-sftp'), concat=require('gulp-concat'),//文件合并 uglify=require('gulp-uglify'),//js压缩 minifyCss=requi…

一.gulp的作用? 1.gulp-sass : 编译sass 2.gulp-rename : 重命名 3.gulp-cssnano : 压缩css 4.gulp-concat : 合并文件 5.gulp-uglify : 压缩js 6.gulp-babel : 将ES6转为ES5 二.如何使用gulp? 1.全局安装gulp: cnpm install -g gulp 2.在项目根目录下初始化package.json : cnpm init -y 3.在项目根目录下局部安装gulp : cnp…

说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成es5的方法.本文前提:需要提前安装好nodejs环境,能够使用npm命令.如果不了解如果配置npm,可以查看笔者前几次的博文. 使用babel来手动构建es5的方式: 1.创建一个空的前端项目 可以使用webStorm等前端工具创建一个空的项目即可. 并创建src/main.js,文件内容如下,其中…

这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发中使用了一个大而全的java框架,框架集成了前后端,前端在这个框架的基础上开发jsp页面,并未做到前后端完全分离.现在我们有些js代码使用了ES6的语法,但后来遇到了IE兼容性的问题,又不得不把代码转换到ES5,ES6的模板字符串是多么好用呀.唉~ > ### 自己尝试过哪些方法> 目前简单配置了…

首先老规矩哈.全局包安装先 cnpm install webpack -g cnpm install gulp -g cnpm install babel -g //转换Es6 上面的整合在一起安装可以写在一起 如下 cnpm install webpack gulp babel -g gulpfile.js   gulp的配置文件 var gulp = require('gulp'), browserSync = require('browser-sync').create(), plugin…

小蚂蚁说: 近年来,国际和国内的领先银行纷纷全力投入数字化转型.IDC去年报告说,全球1000大企业里面,67%已经把数字化转型定为企业级战略,而决定数字化转型成功与否的是人的思想改变.我们用数字化半径来评估数字化覆盖的深度与广度,“数字化半径”越长,创新的覆盖面就越广,驱动创新的速度越快,金融业务迭代的速度就越快. 面向金融科技未来,蚂蚁金服结合与合作伙伴的广泛探索与自身实践经验,自主研发并开放了未来数字金融或数字经济社会所需的5个基础科技:海量金融交易技术.金融智能技术.区块链技术.金融安全…

“我对面向未来教育领域,内心是有一丝悲哀的.至少在我思考和理解的范围内,互联网和 AI 是不是有可能彻底的改变中国教育现状?我没有想清楚.”10 月 31 日,在鲸媒体举办的以“教育 +AI”为的主题大会上,新东方教育科技集团董事长俞敏洪如是说. 在这次演说中,向来说话耿直的“洪哥”,对当下教育培训行业目前面临的监管加重.机构跑路等问题都发表了看法.他认为,现在中国的培训圈充满了焦虑,主要体现在他们面对政府监管的不适应,以及对“AI+ 教育”的理解存在一股浮夸和浮躁风气. 俞敏洪目前收到的商业计…

babel安装 安装前你需要安装node.js和npm以及gulp三个包. 然后执行以下命令 $ npm init 然后在安装 babel和babel-core两个包 $ npm install --save-dev gulp-babel babel-preset-env npm install babel-cor --save-dev 建立文件夹 新建一个名为gulpfile.js的文件夹,然后引入包 const gulp = require('gulp'); const babel = re…

之前<零基础带你看Spring源码--IOC控制反转>详细讲了Spring容器的初始化和加载的原理,后面<你真的完全了解Java动态代理吗?看这篇就够了>介绍了下JDK的动态代理. 基于这两者的实现上,这次来探索下Spring的AOP原理.虽然AOP是基于Spring容器和动态代理,但不了解这两者原理也丝毫不影响理解AOP的原理实现,因为大家起码都会用. AOP,Aspect Oriented Programming,面向切面编程.在很多时候我们写一些功能的时候,不需要用到继承这么…

Web 开发的未来:React.Falcor 和 ES6 Widen是一家数字资产管理解决方案提供商.目前,其技术栈还非常传统,包括服务器端的Java.浏览器端的AngularJS.提供REST API支持的Jersey以及jQuery. Underscore.lodash.jQuery UI和Bootstrap等各种库.近日,该公司的首席开发人员Ray Nicholus在一篇文章中提出了一个面向未来的Web开发技术栈,用于取代现有的工具. 虽然他们已经习惯并信任现有的技术栈,但为了实现以下几个…

    一.sass  less    css预处理器        sass里面有2种语法  第一种语法是sass  后缀名必须是sass   第二种语法是scss  后缀名必须是scss            //scss写法            $width:300px;            $height:400px;            body{                 width:$width;                 height:$height;     …

背景: 当需要为多个不具有继承关系的对象引入一个公共行为,例如日志.权限验证.事务等功能时,如果使用OOP,需要为每个对象引入这些公共 行为.会产生大量重复代码,并且不利用维护.AOP就是为了解决这个问题. 通过动态代理实现,如果目标对象有实现接口,使用jdk proxy,如果目标对象没有实现接口,使用cglib.然后从容器获取代理后的对象, 在运行期植入“切面”类的方法.通过查看Spring源码,我们在DefaultAopProxyFactory类中 动态代理请参考:https://www.c…

在今年的深信服创新大会上,软件定义IT基础设施成为非常重要的议题之一,深信服与2,000余位客户的CIO和合作伙伴一起围绕IT基础设施在数字化时代中的作用与价值进行了深入的探讨. 此外,深信服还联合IDC共同发布了<面向未来 有效保护 护航企业数字化转型白皮书>及<软件定义加速数字化转型之路白皮书>,分别从安全与IT基础设施两个层面,阐述了如何利用安全与软件定义创新技术驱动用户数字化转型. 这是继今年年初,深信服发布深信服智安全.深信服云计算.深信服新IT三大业务品牌之后,深信服掀…