全部文章

通过gulp 在原html文件上自动化添加js、css版本号

原理

修改js和css文件通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)替换html中的js,css文件名,生成一个带版本号的文件名
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

方案

现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案。

原html文件代码

<link rel="stylesheet" href="../css/default.css"><script src="../js/app.js"></script>
  • 1
  • 2

预期效果:在原目录结构下html文件代码

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=3a0d844594"></script>
  • 1
  • 2

1:安装gulp和gulp插件 
执行:

npm install --save-dev gulpnpm install --save-dev gulp-revnpm install --save-dev gulp-rev-collectornpm install --save-dev run-sequence
  • 1
  • 2
  • 3
  • 4

2:编写gulpfile.js

//引入gulp和gulp插件var gulp = require('gulp'),    runSequence = require('run-sequence'),    rev = require('gulp-rev'),    revCollector = require('gulp-rev-collector');//定义css、js源文件路径var cssSrc = 'css/*.css',    jsSrc = 'js/*.js';//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revCss', function(){    return gulp.src(cssSrc)        .pipe(rev())        .pipe(rev.manifest())        .pipe(gulp.dest('rev/css'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revJs', function(){    return gulp.src(jsSrc)        .pipe(rev())        .pipe(rev.manifest())        .pipe(gulp.dest('rev/js'));});//Html替换css、js文件版本gulp.task('revHtml', function () {    return gulp.src(['rev/**/*.json', 'View/*.html'])        .pipe(revCollector())        .pipe(gulp.dest('View'));});//开发构建gulp.task('dev', function (done) {    condition = false;    runSequence(        ['revCss'],        ['revJs'],        ['revHtml'],        done);});gulp.task('default', ['dev']);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

执行gulp命令后的效果

//rev目录下生成了manifest.json对应文件{  "default.css": "default-803a7fe4ae.css"}<link rel="stylesheet" href="../css/default-803a7fe4ae.css"><script src="../js/app-3a0d844594.js"></script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

很显然这不是我们需要的效果

3.更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js第136行 manifest[originalFile] = revisionedFile;更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
  • 1
  • 2
  • 3
打开nodemodules\rev-path\index.js10行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);更新为: return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
  • 1
  • 2
  • 3
打开node_modules\gulp-rev-collector\index.js43
let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );更新为: let cleanReplacement = path.basename(json[key]).split('?')[0];
  • 2
  • 3
打开node_modules\gulp-rev-collector\index.js第143行 regexp: new RegExp(  dirRule.dirRX + pattern , 'g' ),
更新为: regexp: new RegExp( dirRule.dirRX + pattern +'(\\?v=\\w{10})?', 'g' ),
如下:
// changes.push({ //regexp: new RegExp( dirRule.dirRX + pattern , 'g' ), regexp: new RegExp( dirRule.dirRX + pattern +'(\\?v=\\w{10})?', 'g' ), patternLength: (dirRule.dirRX + pattern).length, replacement: _.isFunction(dirRule.dirRpl) ? dirRule.dirRpl(manifest[key]) : closeDirBySep(dirRule.dirRpl) + manifest[key] });


  • 1
  • 2
  • 3

最终结果 
经过上面的四步修改之后现在你不管执行多少遍gulp命令,得到的html效果都是:

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=3a0d844594"></script>

MAC升级Nodejs和Npm到最新版

第一步,先查看本机node.js版本:

node -v

第二步,清除node.js的cache:

sudo npm cache clean -f

第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n"

sudo npm install -g n

第四步,安装最新版本的node.js

sudo n stable

如果报-bash: n: command not found 需要执行下:ln -s /home/node-v6.9.5-linux-x64/bin/n /usr/local/bin/n
/home/node-v6.9.5-linux-x64是安装的路径

第五步,再次查看本机的node.js版本:

node -v

第六步,更新npm到最新版:

$ sodu npm install npm@latest -g

第七步,验证

node -vnpm -v

部署Node.js项目(CentOS)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用来方便地搭建快速的易于扩展的网络应用。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效,非常适合运行在分布式设备的数据密集型的实时应用。Node.js 的包管理器 npm,是全球最大的开源库生态系统。典型的应用场景包括:

  • 实时应用:如在线聊天,实时通知推送等等(如socket.io)
  • 分布式应用:通过高效的并行I/O使用已有的数据
  • 工具类应用:海量的工具,小到前端压缩部署(如grunt),大到桌面图形界面应用程序
  • 游戏类应用:游戏领域对实时和并发有很高的要求(如网易的pomelo框架)
  • 利用稳定接口提升Web渲染能力
  • 前后端编程语言环境统一:前端开发人员可以非常快速地切入到服务器端的开发(如著名的纯Javascript全栈式MEAN架构)

适用对象

本文档介绍如何在阿里云CentOS系统的云服务器ECS实例上,安装Nodejs并部署项目。

准备工作

部署之前,请做如下准备工作:

  • 购买ECS实例
  • 您的实例运行的镜像是CentOS7.2
  • 您的实例可以连接公网
  • 本地已经安装用于连接 Linux 实例的工具,如 Xshell

基本流程

使用云服务器 ECS 安装Nodejs并部署项目的操作步骤如下:

  1. 购买 ECS 实例。
  2. 部署Node.js环境-二进制文件安装。
  3. 部署Node.js环境-使用NVM安装多版本。
  4. 部署测试项目。

注:2和3步骤,根据您的实际应用场景,任选其一。

操作步骤

步骤 1:创建ECS实例

选择操作系统为公共镜像CentOS7.2。使用root用户登录Linux实例

步骤2:部署Node.js环境—二进制文件安装

该部署过程使用的安装包是已编译好的二进制文件,解压之后,在bin文件夹中就已存在node和npm,无需手工编译。

安装步骤:

1、 wget命令下载Node.js安装包。

该安装包是编译好的文件,解压之后,在bin文件夹中就已存在node和npm,无需重复编译。

  1. wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

2、 解压文件。

  1. tar xvf node-v6.9.5-linux-x64.tar.xz

3、创建软链接,使node和npm命令全局有效。

通过创建软链接的方法,使得在任意目录下都可以直接使用node和npm命令:

  1. ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
  2. ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

4,查看node、npm版本。

  1. node -v
  2. npm -v

5、至此,Node.js环境已安装完毕。

软件默认安装在/root/node-v6.9.5-linux-x64/目录下。如果需要将该软件安装到其他目录(如:/opt/node/)下,请进行如下操作:

  1. mkdir -p /opt/node/
  2. mv /root/node-v6.9.5-linux-x64/* /opt/node/
  3. rm -f /usr/local/bin/node
  4. rm -f /usr/local/bin/npm
  5. ln -s /opt/node/bin/node /usr/local/bin/node
  6. ln -s /opt/node/bin/npm /usr/local/bin/npm

UglifyJS2安装


npm 全局安装

sudo npm install uglify-js -g

你也可以通过 github 来下载源码使用

git clone git://github.com/mishoo/UglifyJS2.git
使用:

dir$ uglifyjs spa.js -m -o spa.min.js

* source-map [string],生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的网站访问地址。
* –source-map-include-sources,设置源文件被包含到source map中。
* –in-source-map,自定义source map,用于其他工具生成的source map。
* –screw-ie8, 用于生成完全兼容IE6-8的代码。
* –expr, 解析一个表达式或JSON。
* -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, –output [string], 输出到文件。
* -b, –beautify [string], 输出带格式化的文件。
* -m, –mangle [string], 输出变量名替换后的文件。
* -r, –reserved [string], 保留变量名,排除mangle过程。
* -c, –compress [string], 输出压缩后的文件。
* -d, –define [string], 全局定义。
* -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* –comments [string], 增加注释参数,如@license、@preserve。
* –preamble [string], 增加注释描述。
* –stats, 显示运行状态。
* –acorn, 用Acorn做解析。
* –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* –self, 把UglifyJS2做为依赖库一起打包。
* –wrap, 把所有代码合并到一个函数中。
* –export-all, 和–wrap一起使用,自动输出到全局环境。
* –lint, 显示环境的异常信息。
* -v, –verbose, 打印运行日志详细。
* -V, –version, 打印版本号。
* –noerr, 忽略错误命令行参数。





uglifyjs压缩批处理

新建一个txt文档,任意命名,将下面的代码粘贴进去,修改JSFOLDER后面的文件夹目录为你自己的,然后把.txt后缀改成.bat就可以啦!然后双击就可以批量使用uglifyjs压缩JS文件啦!

[html] view plain copy
  1. @echo off  
  2. :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS  
  3. SET JSFOLDER=C:\Users\Administrator\Desktop\page  
  4. echo 正在查找JS文件  
  5. chdir /d %JSFOLDER%  
  6. for /r . %%a in (*.js) do (  
  7. @echo 正在压缩 %%~a …  
  8. uglifyjs %%~fa -m -o %%~DPNa.min.js  
  9. )  
  10. echo 完成!  
  11. pause & exit  

什么样的APP算是好的

1、绝不考虑Web形态,一切考虑都基于APP。

2、产品优先级:
(1)有趣高于功能,产品必须有趣,必须Cool,才可能形成传播和口碑。
(2)功能高于交互,明确的功能满足明确的需求,用户不会在意炫酷交互效果。
(3)交互高于UI。便捷、快速的交互设计为先,围绕具体功能实现UI,而非有优质UI方案为此专门设立一个功能。

3、聚焦:一个APP只做一件事情,一个大而全的APP意味着全面的平庸。

4、永远一维化:让用户在一个维度里解决具体的问题,Twitter的Timeline就是一个好的范例。而类似Facebook、Path那样的滑出式菜单则是一个灾难,因为这使得产品拥有两个维度,加大了用户理解的困难。

5、保持主干清晰,枝干适度。产品的主要功能架构是产品的骨骼,它应该尽量保持简单、明了,不可以轻易变更,让用户无所适从。次要功能丰富主干,不可以喧宾夺主,尽量隐藏起来,而不要放在一级页面。

6、不要让用户选择。同一个页面之内,有多个入口;同一个功能,有多个实现方式;同一个界面,有多个展示方式。这对于用户来说是一种痛苦而非享受,因为他们只会因此而感觉到困惑和恐惧。用户宁可采取重复操作漫长而固定的操作路径,也不愿意使用多变的快捷方式。

7、隐藏技术,永远展现简单的、人性化的、符合人类直觉的界面。开发不可以为了炫技而展示功能,产品不可以为了炫耀而功能堆砌。

8、 拒绝个性化。除了依靠设计特色而立身的APP,换肤一类的个性化设计,除了让产品经理幻觉自己做了许多工作而自我满足之外,没有任何价值。它只能证明产品经理对自己的产品不自信,因为自信的产品经理凭借默认皮肤就可以满足用户。延伸开去,一个好的产品,其功能应该满足全球用户需求,无需为地区做特别定制化。

9、 产品一定程度上是为了满足人性中的贪嗔痴,这是用户的痛点。能把握住之后,产品经理应该超越其上,用产品帮助人们得以解脱。

10、想清楚自己究竟要做什么,不去迎合上司,不去讨好用户,不去取悦自己。

11、 分类!分类!分类!这是产品经理在确定产品主要功能构架之后,唯一应该为用户做的事情。分类无助于降低产品使用的难度,但是可以帮助用户认知产品和周边的世界。

12、永远围绕功能而做设计,永远不要倒过来做这件事情。

13、一个产品的基本功能不受用户认可,做加法也无济于事。

14、想不清楚一个功能点之前,宁可不做。

15、千万不要让用户在产品里“管理”什么。

体验分析文章

1、产品概览

主要包括 产品定位、目标人群、用户痛点、核心需求,可选内容有 运营策略、内容来源。作为用户体验五要素-战略层,是交互设计的基础。了解这些,在体验产品时才可能更了解设计背后的缘由。

2、功能模块分析

主要是梳理功能、功能点,熟悉背后的产品逻辑、机制、要点,并记录下来,对应用户体验五要素-范围层。通过这一步可以非常全面的了解这个产品是如何满足用户需求,除了主要功能模块还有哪些辅助功能。这样在下一步能更系统的做交互设计分析。

3、交互设计分析

1)分析App的信息架构/层级结构,明白这样设计的理由。

2)用户完成主任务的流程。

以购物为例,主任务之一的流程是——挑选喜欢的物品、加入购物车、从购物车中结算。而挑选喜欢的物品,则可以通过 首页、频道页、搜索结果页、详情页等页面完成。

3)重点针对与主任务流程相关的界面进行分析,撰写在界面布局和交互操作上如何做、有何亮点、是否有什么问题和建议。

4、用户反馈

在体验App期间,可以多翻翻用户的评论,有些资深用户的反馈还是挺有代表性的。针对这些反馈,可以从产品功能、交互设计上思考改进方案。

5、面临的挑战

产品最大的问题是什么?如果是我来做,我会怎么改进这个产品?

6、竞争产品

竞品有哪些?和竞品比,这个产品的优势是什么?劣势是什么?

以上几点,并不是每一点都得写,针对产品特性、以及对产品的了解可以适当调整。有时候为了防止自己拖延,我也会适当降低要求,重要写某几个模块。

移动APP设计师之APP整体构图速成法

一位优秀的移动APP客户端的UI设计师,在接到一个移动case的时候,脑海中应该浮现很多相关的一点APPui碎片。

肯定很多人会说,拥有这个功力肯定不是应届APPUI毕业生所能掌握的。25学堂的小编说,未必。只要平常我们多安装一些优秀的APP、每天来欣赏一款独特美的APP。

把这些好的APP 翻来覆去的浏览即可。

APP设计案例 移动App设计 界面构图设计

但是整体APP设计流程和设计模块,我们肯定要知道的。

一、APP图标设计

图标通常是传达给用户的第一视觉感受,它可以体现出产品风格 、功能,甚至品质。iphone独特的桌面展示方式,引领了”豆腐块”图标趋势,即在一个圆角方形的区域内创造各种可能。 分析众多优秀应用图标发现,要设计一款精致醒目的图标,大概可以遵循以下几点:

a、图形元素尽可能不超过2个,并且不可平均分布,突出主视觉;

b、桌面极少使用浅色,因此配色尽量以明亮浅色为主,以免被背景吸收掉;

c、为了让图标更加自然融合其中,符合ios平台的透视标准,尽量使用正面垂直角度,光源自上而下。

APP设计案例 移动App设计 界面构图设计

二、3-4张的引导界面设计

APP的新手引导,原本的出发点很简单,类似于一个简洁的产品说明书,其主要目的是为了向用户展示该APP的核心功能及用法。 一般出现在用户首次安装APP后打开的时候。欢迎界面一般为2 – 5屏的全屏静态图,左右滑动进行翻页,有跳过按钮;新功能指示及操作引导一般用蒙板加箭头指引的形式完成。

APP设计案例 移动App设计 界面构图设计

三、欢迎界面设计或者说是APP启动界面设计

欢迎界面(闪屏)像是应用的一道门,在使用前给用户一个预示,它通常包含图标、版本号、加载进度等信息。设计可以根据产品风格随意发挥,与图标呼应,强化产品的印象。

四、主要的功能界面设计

遵守IOS的交互习惯,功能界面的结构通常自上而下,分别是“状态栏、导航栏、标签栏、工具栏”

根据不同功能的界面、常见有以下几种设计方式:

列表视图——适合目录、导航等多层级的界面。将信息一级级的收起,最大化的展示分类信息。

分层的界面—— 利用iPhone本身独有的特性让其固定,或垂直、水平滚动,节省空间。

拟物化设计——适合实现独立功能的界面设计,界面的细节逼真写实。以现实的元素和操作唤起用户共鸣。

另外,当我们完成一系列辛苦的APP设计工作之后,为了让客户端开发人员完成我们设计出的效果。或者说要想准确传达自己的设计可以分三步来实施:

第一步:要实现快速可视化。

你可以选择任何用的顺手的工具,把自己的想法快速准确的呈现出来,就已经是成功的一半。

第二步:最大限度的还原使用场景。

如果是PC端,就在电脑上演示。如果是移动端,就在手机上演示。如果可操作,那最好做可交互的原型,当然,是在时间成本允许的条件下。

第三步:把设计参数化,尽可能减少让工程师凭感觉开发的情况。

相信我,如果你不希望工程师凭感觉调UI颜色,那么动效同理。一份精确的文档或者是高保真的原型效果图,是你专业性的体现。

总之:移动开发当中,app设计师要把设计稿做严格的标注,各个元素的尺寸 和之间的间距,字体大小,颜色,透明度等。

js去除html标签

收集整理了关于js去除html标签,以方便参考。

function removeHTMLTag(str) {

str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag

str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白

//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行

str=str.replace(/ /ig,'');//去掉

return str;

}

Total: 140Page 1 of 181234567Next ›Last »