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

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

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片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 命令行…

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…

一.从零开始搭建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 里面,这样就可以做到一个组件对…

(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-…

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

很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带…

Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说…

前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gulp真的很灵活,而且个人觉得它和node结合起来比较舒服,再有对项目目录结构的要求比较低,即使再老再乱的项目也可以通过它进行整理和自动化构建.这里用本公司的一个老项目举例子. 项目目录 因为是老项目,各种资源的引用乱七八糟,首先花费大量时间把项目中所有静态资源全部整理至新的目录中,并且把原来项目中的…

.相信所有的前端攻城狮.听到浏览器兼容性问题都深有体会. 浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.还有就是根据浏览器的版本不同,所兼容的css属性有所差异. 今天我们借助gulp工具全局跑css文件,实现自动补全,在各个浏览器的写法补全.至于属性兼容还需要具体情况具体对待. 1:全局安装gulp .  cmd    cnpm/npm install gulp -g (cnpm/npm自己选择,个人建议用cnpm) 2:安装完成查…

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压缩 它…

前端服务器本地搭建分三阶段: 1.Node.js的安装 2.Npm环境配置 3.编写JS文件 1.Node.js安装: 如图所示: Next: 选择I accept 然后Next: 选择安装文件的位置,然后Next: Next: 选择Install: 等待安装: Node.js 安装完成,选择Finish:接下来安装服务需要NPM. 2.Npm环境配置: 点击计算机左下角开始图标输入CMD,找出命令输入框.先查看Node.js是否安装正常,输入命令:node -v 回车.查看Node版本号,如下…

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

目录 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.…

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is…

前端开发需要了解的工具集合:webpack, eslint, prettier, ... 前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍. 1. nrm: npm registry 管理器 registry: npm 远程仓库的地址. 由于众所周知的原因,npm 官方仓库在国内特别的慢,所以我们需要用一些替代性方案,一种方案就是切换 npm registry 到国内的镜像仓库. 所以,一般我们会这样做: # 切换到淘宝 npm 仓库 npm config set regist…

前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less的园友提供参考,如果你是前端大神,此文就没必要看了哈.算了,扯远了哈,进入正题. 本文原创地址:http://www.cnblogs.com/landeanfen/p/6047031.html 一.Less介绍 1.官方介绍 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变…

http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@163.com),经过评级审核后邀请进入 一. css 40分 1. 什么是盒模型?    2. Doctype的几种类型?   3. 如何布局左不动右边自适应的两列布局? 4. 如何布局两列等高?    5. 如何布局右侧定宽,左侧或中间自适应? 6. 如何布局三列自适应?  7. gif,png,j…

使用方法: 下载 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分钟 一次以保证尽量…

这是一个培训课 是的,这是一个面向中级前端的培训班,但明显跟传统的填鸭式培训班不太一样.这边的老师都是大牛这是毫无疑问的,而且都是一线开发人员.而且课程一开始就说明了面向了是有1-3年有工作经验的前端,所以课程难度还是有些的,信息量也很大,需要自己充分消化吸收. 总体感受 说实话,由于课程难度比较大,我在试听了两节课之后有考虑过要不要继续下去(这边承若前几节课觉得不合适是可以全额退款的).深思熟虑之后我还是想挑战一下自己.其实经过了前几节讲测试的课的懵逼状态之后慢慢感觉还好.主要是块过年放假了,…

我的机器: 3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux 1.安装nodejs ~$ wget https://nodejs.org/dist/v6.2.0/node-v6.2.0-linux-x64.tar.gz ~$ tar -zxvf node-v6.2.0-linux-x64.tar.gz ~$ sudo mv node-v6.2.0-linux-x…