前端构建部署
文章平均质量分 78
u013063153
这个作者很懒,什么都没留下…
展开
-
webpack实例与前端性能优化
壹 | Fisrt曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了。近年来Web前端开发领域朝着规范开发的方向演进。体现在以下两点:MVC研发构架。多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...)构建工具层出不穷。多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重复的工作)模块化开发将前端性能优化理论转载 2016-09-03 17:08:17 · 3729 阅读 · 1 评论 -
Maven建立本地仓库
Maven仓库在以前使用Ant的时候,我们会建立一个lib目录在存放我们的jar包,比如项目所依赖的第三方包,每建立一个项目都要建立一个lib,不停的做copy工作,不仅是对于磁盘的浪费,而且也造成了版本管理上的麻烦。而且我们还需要通过提交到svn上来对lib进行管理,但是svn对于这种二进制文件的管理并不出色。Maven仓库的初中就是为了解决这个问题,是所有常用的第三方包的集中营。这原创 2015-10-08 22:13:00 · 837 阅读 · 0 评论 -
CommonJS,AMD,RequireJS的区别
RequireJS实现了AMD的API.CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容。简单地实现一个CommonJS的定义就像下面这样:// someModule.jsexports.doSomething = function() { return "foo"; };//otherModule.jsvar someModule = requ原创 2016-09-03 17:07:01 · 771 阅读 · 0 评论 -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?- 玉伯的回答
LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行。LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更原创 2016-09-03 17:07:04 · 1173 阅读 · 0 评论 -
JavaScript 模块化历程
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史。无模块时代在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验、实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代。这个原创 2016-09-03 17:07:07 · 552 阅读 · 0 评论 -
RequireJS实例分析
随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路: 1 模块化组织JS 2 异步加载JS文件 有了这两种解决办法,能有效的帮助我们解决前端代码库的组织难题。 本文原创 2016-09-03 17:07:09 · 329 阅读 · 0 评论 -
Gulp开发教程(翻译)
Building With Gulp===================原文地址翻译出处原创翻译,有不当的地方欢迎指出。转载请指明出处。谢谢!对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。Gulp是一个构建系统,它能通过自动执行常原创 2016-09-03 17:07:24 · 476 阅读 · 0 评论 -
Grunt VS Gulp
前期准备windows7noderubysass+compassgrunt篇新建一个grunt_demo 目录,用compass 创建一个项目 mkdir grunt_demo cd grunt_demo compass init打开CMD,安装grunt-cli到全局环境npm install -g grunt-cli注意,安原创 2016-09-03 17:07:27 · 475 阅读 · 0 评论 -
Sass和Compass入门
一.前言1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。 Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码,易于组织和原创 2016-09-03 17:07:29 · 388 阅读 · 0 评论 -
在实战中使用Sass和Compass
第三章 无需计算玩转CSS网格布局3.1 网格布局介绍3.2 使用网格布局3.2.1 术语1 术语名 定义 是否涉及HTML标签2 列 内容度量的垂直单位 否3 容器 构成一个网格布局的HTML元素 是4原创 2016-09-03 17:07:32 · 705 阅读 · 0 评论 -
认识Sass和Compass
第一章 Sass和Compass让样式表重焕青春// 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战1.2.1 通过变量来复用属性值1 声明变量:$blue:#1875e7;2 调用变量:.blue { color:$blue; }1.2.2 通过嵌套来快速写出多层级的选择原创 2016-09-03 17:07:34 · 417 阅读 · 0 评论 -
【译】2015: 前端工具现状
原文:http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results译者:@lizheming本文数据更新至 2015年09月09日。由于当我发出这篇文章后,问卷又增加到了 1000 份(编写这篇文章的时候还是 649 份),所以我特地更新了一下文章的数据。比较有趣的事是虽然问卷的份数增加了,但是对之前的统计结果似乎原创 2016-09-03 17:07:37 · 510 阅读 · 0 评论 -
快速上手seajs——简单易用Seajs
什么是SeajsSeajs是一个加载器 http://kb.cnblogs.com/page/211942/遵循 CMD 规范模块化开发,依赖的自动加载、配置的简洁清晰。兼容性Chrome 3+Firefox 2+Safari 3.2+Opera 10+IE 5.5+导入Seajs库去官网下载最新的seajs文件, http://seajs.转载 2016-09-04 21:20:19 · 484 阅读 · 0 评论 -
SASS的介绍和应用示例入门
1.SASS介绍SASS是基于Ruby的 CSS预处理器。less是基于JavaScript的CSS预处理器。对于大文件的编译,SASS是略胜less。2.应用示例入门小网站:www.w3cplus.com/sassguide/建立如下工程目录:|test |-index.scs(1)变量index.scss的代码如下:$fontStack原创 2016-09-04 22:26:34 · 1662 阅读 · 0 评论 -
入门Webpack,看这篇就够了
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走转载 2016-09-30 16:54:55 · 2092 阅读 · 0 评论 -
NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可转载 2016-09-30 10:43:18 · 2154 阅读 · 1 评论 -
RequireJS示例
建立如下工程目录:|-test |-index.html |-index.js |-main.js |-require.min.js |-test.js其中,index.html如下:html lang="en">head> meta charset="UTF-8"> title>Indextitle>head>原创 2016-09-04 12:50:36 · 455 阅读 · 0 评论 -
全栈必备 负载均衡
原文地址:http://blog.csdn.net/wireless_com/article/details/52761138一个了不起的创意会产生一个很棒的产品,如果它一炮走红,你发现手中的是下一个facebook 或者twitter,而且随着用户越来越多,会变得越来越慢,该怎么办呢?对全栈而言,解决这类问题的一个重要技能就是——负载均衡。什么是负载均衡负载(load)一转载 2016-10-13 14:12:15 · 868 阅读 · 0 评论 -
webpack 入门指南
什么是 webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在原创 2016-09-03 17:08:19 · 498 阅读 · 0 评论 -
gulp压缩js应用示例
建立项目目录如下:|-test |-build |-js |-idnex.js |-main.js |- gulpfile.js |-index.html其中gulpfile.js的文件代码如下: var gulp = require("gulp"); var uglify =原创 2016-09-04 21:51:36 · 642 阅读 · 0 评论 -
gulp入门-压缩js/css文件(windows)
原文链接:http://jingyan.baidu.com/article/f79b7cb37ec0219145023e79.html首先要确保pc上装有node,然后在global环境和项目文件中都install gulpnpm install gulp -g (global环境)npm install gulp --save-dev (项目环境)原创 2016-10-11 13:37:02 · 7494 阅读 · 1 评论 -
gulp-html-replace
原文链接:https://www.npmjs.com/package/gulp-html-replace?from=singlemessage&isappinstalled=1%20For%20security,%20do%20not%20share%20your%20WeChat%20account%20information%20online.Table of Contents翻译 2016-10-11 12:54:00 · 3649 阅读 · 0 评论 -
前端们,gulp该用起来了,简单的demo入门——gulp系列(一)
原文链接:http://www.cnblogs.com/1wen/p/4533608.htmlgulp、grunt前端自动化工具,只有用过才知道多么重要。它们问世这么久了?你真的用过吗?写个简单的less、watch任务的demo分享———— 1.准备:安装全局node、npm,这个教程很多不作详细介绍;安装全局gulpnpm i转载 2016-09-22 21:43:30 · 2042 阅读 · 0 评论 -
Less函数说明
索引escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为颜色值data-uri([mimetype,] url);转载 2016-09-22 21:40:22 · 1007 阅读 · 0 评论 -
谈谈Grunt,NPM,Gulp
随着前端工程化的趋势,产生了越来越多的构建工具,而其中比较优秀的就是grunt,npm,gulp,今天我来说说这三者间的区别以及他们的优缺点.相信一般前端开发者选择构建工具的时候,更多的是看个人习惯以及团队的情况.相信这三个构建工具总有一个会适合你的,我们先来看看grunt.Gruntgrunt是目前社区最成熟,插件支持最多的一个构建工具,不过它的配置项之多也常常被人诟病.下面就一原创 2016-09-03 17:07:39 · 655 阅读 · 0 评论 -
React入门实例教程
文章转自:阮一峰现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好原创 2016-09-03 17:08:05 · 484 阅读 · 0 评论 -
谈一谈我对 React Flux 架构的理解
原文链接:http://www.cocoachina.com/webapp/20150928/13600.htmlReact Flux架构简介React 简介请戳这里。Flux是什么Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新转载 2016-09-12 14:49:54 · 2643 阅读 · 0 评论 -
Flux 架构入门教程
原文地址:http://www.ruanyifeng.com/blog/2016/01/flux.html过去一年中,前端技术大发展,最耀眼的明星就是React。React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 R转载 2016-09-12 14:47:11 · 846 阅读 · 0 评论 -
Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文,以加深其中的重点概念。根据该项目源码的习惯,示例都是基于 ES2015 的语法来写的。Redux 是应用状态管理服务。虽然本身受到了 Flux 很深的影转载 2016-09-03 17:09:53 · 1704 阅读 · 0 评论 -
解读redux工作原理
原文地址:https://segmentfault.com/a/1190000004236064?utm_source=Weibo1. 前言随着WEB应用变得越来越复杂,再加上node前后端分离越来越流行,那么对数据流动的控制就显得越发重要。redux是在flux的基础上产生的,基本思想是保证数据的单向流动,同时便于控制、使用、测试。redux不依赖于任意框架(库)转载 2016-09-12 12:08:31 · 2741 阅读 · 0 评论 -
Redux系列01:从一个简单例子了解action、store、reducer
先看例子其实,redux的核心概念就是store、action、reducer,从调用关系来看如下所示store.dispatch(action) --> reducer(state, action) --> final state可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍// reducer方法, 传入的参数有两个// state: 当转载 2016-09-12 10:50:47 · 848 阅读 · 0 评论 -
Redux系列02:一个炒鸡简单的react+redux例子
原文地址:https://segmentfault.com/a/1190000004215810前言在《Redux系列01:从一个简单例子了解action、store、reducer》里面,我们已经对redux的核心概念做了必要的讲解。接下来,同样是通过一个简单的例子,来讲解如何将redux跟react应用结合起来。我们知道,在类flux框架设计中,单向数据流转的方转载 2016-09-12 10:48:43 · 650 阅读 · 0 评论 -
Redux 介绍
本文主要是对 Redux 官方文档 的梳理以及自身对 Redux 的理解。单页面应用的痛点对于复杂的单页面应用,状态(state)管理非常重要。state 可能包括:服务端的响应数据、本地对响应数据的缓存、本地创建的数据(比如,表单数据)以及一些 UI 的状态信息(比如,路由、选中的 tab、是否显示下拉列表、页码控制等等)。如果 state 变化不可预测,就会难于调试(state 不原创 2016-09-03 17:08:38 · 542 阅读 · 0 评论 -
实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+;redux 的 star 数也要接近 20000,可见大家对其的热转载 2016-09-03 17:08:58 · 4068 阅读 · 1 评论 -
Redux入门指南
简介redux是可预测的JS应用状态容器。状态现在有一个开关按钮组件ToggleButton,而按钮的on/off就是这个组件的状态。一个应用里面会有大量的组件,而管理以及传递这些组件的状态,就成了非常繁琐的工作。redux使用一个非常简洁的思路,方便地提供不同层级组件的解耦式状态操作。管理状态reudx本身是一个非常简单的流程概念,它仅仅是一个状态容器。如图:APP或原创 2016-09-03 17:09:03 · 601 阅读 · 0 评论 -
使用Redux管理你的React应用
原文作者:http://www.cnblogs.com/Leo_wl/p/4780750.html 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ,我会在这里进行持续的更新和纠错。Re原创 2016-09-03 17:09:36 · 1690 阅读 · 0 评论 -
React/Router
React Router 一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。概览在阐明React Router可以帮你解决的问题之前我们来举一个没有引用React Router 的简单例子。没使用 React Routervar About = React.createClass({ render: fun转载 2016-09-03 17:09:06 · 732 阅读 · 0 评论 -
从 React Router 谈谈路由的那些事
原文地址:http://stylechen.com/react-router.htmlReact Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的。React Router 并不是 Facebook 的 React 官方团队开发的,但是据说有官方人转载 2016-09-12 15:23:47 · 11629 阅读 · 0 评论 -
推荐!手把手教你使用Git
原文出处: 涂根华的博客 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统。二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以首先要从中央服务器哪里得到最新的版本,然后干活,干完后,需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作,如果原创 2016-09-03 17:08:50 · 320 阅读 · 0 评论 -
gulp详细入门教程
原文地址:http://www.ydcss.com/archives/18 简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 java原创 2016-09-03 17:09:14 · 517 阅读 · 0 评论