seajs压缩
⑴ gulp模块为什么不支持复制粘贴
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并。现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题。 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的应用而言,显然就违背了模块化思想中按需加载的核心,所以我想要的是一个能够根据我每个页面各自所依赖的模块来按需合并的方法。 这个按需合并的意思,一方面是只合并一个页面所依赖的那些模块,另一方面是,还能过滤掉某些模块不参与合并,考虑这个的原因在于有些模块,比如jquery等,都属于第三方依赖的库,可能文件比较大,最重要的是你几乎不会去改动它的代码,所以这些模块不合并到页面的js中,会有助于更好地利用浏览器缓存。本文介绍一个简单可行的办法,来做基于gulp构建的中小型项目中的seajs合并压缩。 注:为了说明,seajs合并后的效果,本文提供了一个演示demo,它有两个页面:login/liuyunzhuge/blog/tree/master/seajs 1/seajs/seajs/issues/426。 gulp-seajs-concat做合并的时候,就很简单了,只要告诉它一个base选项即可,这个base选项跟js/common.js中base选项保持一致。因为gulp-seajs-concat根据base和transport之后的模块,就能找到它所依赖的其它模块文件。 4)页面中使用main js时要采用这种方式: use的参数名称,必须跟合并之后的main js的主模块ID保持一致。比如js/app/login.js合并之后是这个样子: 第一个define对应的模块就是合并后文件内的主模块,红框的内容就是该主模块的id,seajs use这个模块的时候,参数名称必须和这个id一致。否则seajs即使成功的加载到了这个文件,也不会执行任何模块内的代码。因为seajs有一个规则:ID 和路径匹配原则,其中有点跟这个相关,就是:当seajs use到一个文件内包含多个模块时,会根据use的参数名来寻找这个文件内的主模块,只有它们完全匹配,才能找得到。 5)压缩混淆:使用gulp-uglify: 但是要注意那个mangle,必须把require exports mole排除掉,否则会引发一些意外的问题。 2. 本文小结 本文内容虽然很简单,但是在刚切到gulp和seajs的时候,还是费了不少时间才把本文的问题解决,虽然在准备demo的时候进展地比我当时的情况要顺利的多…不管怎么样,希望本文的内容多多少少能帮助到一些朋友。
⑵ web前端需要哪些技术
所有知识框架,那肯定是一个结构型的展现,就是一棵树。web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,否则就会显得很乱。那么如何组织、把谁和谁放在一块儿?这是真正值得我们去思考的,你也可以自己来思考一下这个问题。
在我总结的这个知识框架中,首先第一层我划分为:理论知识,类库框架,编码开发,运行环境。如下图:
首先,你要知道web系统虽然大部分是在浏览器下运行,但是js可能会被运行在node环境。
在浏览器环境下,最重要的两点是:web安全和性能优化。需要注意的纲要我都列出来了,如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》
8. 其他
以上这些是全部的知识体系。如果你想成为一名合格的、让leader喜欢的程序猿,你除了知道这些知识之外,我觉得还需要以下几点:
要了解敏捷软件开发流程(如SCRUM)和项目管理知识(如考取PMP),这也属于一种“软”知识吧;
要学会在网上和别人交流(博客、qq群、开源项目),交流能让自己看到自己的不足;
要学会自我反省和自我学习。就像我现在一样,试着自己总结一下属于自己的东西,随时反省随时进步
⑶ Webpack,Browserify和Gulp三者之间到底是怎样的关系
怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。
说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。
seajs / require : 是一种在线"编译" 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、mole 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。
这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
不知道这样够清楚了么
⑷ 怎样用yuicompressor压缩使用了seajs架构的js代码
点“输入”,在弹出的窗口中,第一项“Local storage”是读取你保存在手机中的文件js,第二个“Treebl's official repo”是输入代码js的,第三个是输入网址远程载入js,第四个是根据名称读取js,其中第三种和第四种方法使用得相当少,可以忽略。
⑸ 网站优化:所有的js代码放到同一个js文件中好,还是不同的页面根据需要创建不同的js文件好
网站优化:一个是压缩合并css,js,一个是合并图片和小图标来达到减少请求量的目的;所以当然是所有的js代码放到同一个js文件中好;需要注意的是:
1、只要命名不冲突放一个文件里面完全没问题,初始化代码用一个$(function(){...})包裹着就可以了;
2、不同的页面执行不同的逻辑代码块完全不冲突,关键是知道自己在做什么;
具体做法:
1)比如a.css,b.css,c.css,把里面的内容都复制到一个css中,main.css这样手动就可以合并
压缩的话,网上都有工具来压缩,直接网络 css压缩 就可以了;
2)js大部分是可以直接和css一样手动合并,然后压缩的(压缩方法,和压缩css一样,网络去),不过要注意复制到文件时的顺序,和代码里面的一些规范,不要把依赖什么的搞混了;如果js文件非常多手动处理很麻烦的时候,可能需要借助工具来实现,你可以试着用前端的一些加载器(require,seajs)来做一些优化,达到按需加载的目的,推荐用seajs试试;自动压缩的话,可以用nodejs的grunt来压缩,很好用。
⑹ 用了webpack还需要用seajs吗
webpack是后台工具,是负责:开发过程中的代码模块化,代码压缩、检查等的功能的插件。
而seajs是一个CMD的一个前端引js的东西,解决前端依赖的
可以在使用webpack就不用使用seajs了,使用了反而更多的加载seajs的文件了
⑺ npm安装spm出错,请问是什么问题
SPM v.1.1.2 With SeaJS
SPM v1.1.2使用指南
1.SPM用途
SeaJS提供了模块化开发的机制,在代码开发完后,还需要做产品发布相关的一些操作。 这些可以通过SPM来完成,SPM提供了模块安装、压缩、打包部署等功能。
2.SPM安装
1.从nodejs官网下载最新版本的node。 这里以node-0.8.14为例,直接下载windows版本的安装包即可,默认安装到"C:\Program Files\nodejs", 会自动添加到path中,查看一下版本。
C:\Documents and Settings\Administratornode -v
v0.8.14
2.新版的node都带了npm,这里通过npm来安装spm。下面指定安装1.1.2版本,在当前为最新版本。 如果不指定版本号,默认安装最新版本。安装包大小为11.8M,根据网速不同,请耐心等待。
C:\Documents and Settings\Administratornpm install [email protected] -g
npm http GET https://registry.npmjs.org/spm/1.1.2
npm http 200 https://registry.npmjs.org/spm/1.1.2
npm http GET https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http 200 https://registry.npmjs.org/spm/-/spm-1.1.2.tgz
npm http GET https://registry.npmjs.org/spm-env
npm http GET https://registry.npmjs.org/csslint
npm http GET https://registry.npmjs.org/async
...
下载完spm后,会根据压缩包中的package.json自动安装相关的依赖包,最后会显示如下的界面。
C:\Documents and Settings\Administrator\Application Data\npm\spm - C:\Documents and Settings\Administrator\Application
Data\npm\node_moles\spm\bin\spm
[email protected] C:\Documents and Settings\Administrator\Application Data\npm\node_moles\spm
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected].
0, [email protected], [email protected], [email protected])
3.安装后检查一下版本
C:\Documents and Settings\Administratorspm -v
v1.1.2
如果这种方式安装比较慢,可以git 源码后安装,详见官方文档。
本次测试使用的是Widnows XP操作系统
以下演示使用的是v1.1.2版本,不同的版本可能存在差异,请自行留意。
3.SPM查找和安装模块
我们先在C盘根目录建立一个assets目录,用于保存前端开发的所有文件。
先使用spm下载开发需要的模块,spm默认的模块服务器为http://moles.spmjs.org/。 也可以自己在内网搭搭设一个模块服务器,这里不详述。
我们可以先使用spm search命令在模块服务器查找可安装的模块的版本。
C:\assetsspm search seajs
C:\assetsspm search jquery
C:\assetsspm search mustache //以mustache为例子
...
versions: //这里列出可用的版本
0.4.0:
- mustache.js
0.5.0:
- mustache.js
root: gallery //显示模块的跟目录
name: mustache
tag:
type:
C:\assetsspm install [email protected] //指定安装seajs版本
C:\assetsspm install gallery.jquery //不指定版本号,默认安装服务器上jquery最新版本
C:\assetsspm install gallery.mustache //不指定版本号,默认安装服务器上mustache最新版
⑻ 网页页面优化如何合并JS
网站优化,一个是压缩合并css,js,一个是合并图片和小图标来达到减少请求量的目的
合并css和js这个很简单
比如a.css,b.css,c.css
把里面的内容都复制到一个css中,main.css这样手动就可以合并
压缩的话,网上都有工具来压缩,直接网络 css压缩 就可以了
js的话,大部分是可以直接和css一样,手动合并,然后压缩的(压缩方法,和压缩css一样,网络去),不过要注意复制到文件时的顺序,和代码里面的一些规范,不要把依赖什么的搞混了
如果js文件非常多手动处理很麻烦的时候,可能需要借助工具来实现,这个,你可以试着用前端的一些加载器(require,seajs)来做一些优化,达到按需加载的目的,推荐用seajs试试
自动压缩的话,可以用nodejs的grunt来压缩,很好用
⑼ seajs怎样调用压缩后的文件
PrintPreviewDialog pPDlg;
exec_prefix='NONE'PACKAGE='libevent'
PACKAGE_BUGREPORT=''
PACKAGE_NAME=''
PACKAGE_STRING=''
PACKAGE_TARNAME=''
PACKAGE_URL=''
PACKAGE_VERSION=''
PATH_SEPARATOR=':'
⑽ 如何将模块化js组件可以在seajs或者requirejs中使用
首先,下载到源码之后,在页面引入lib/echarts-plain-map.js,plain-map是未压缩的版本
<script type="text/javascript" src="lib/echarts-plain-map.js"></script>
然后引入主文件之后,就可以直接使用init()实例化了
<script type="text/javascript">var myChart = echarts.init({ // ...});</script>