【图文】GruntJS前端自动化构建_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
GruntJS前端自动化构建
上传于||暂无简介
大小：1.55MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢git版本控制工具和前端构建工具Grunt
一、Git版本控制工具与svn的区别
　　官网：/p/git-guide/
　　如果你在读这篇文章，说明你跟大多数开发者一样对GIT感兴趣，如果你还没有机会来试一试GIT，我想现在你就要了解它了。
　　GIT不仅仅是个版本控制系统，它也是个内容管理系统(CMS),工作管理系统等。如果你是一个具有使用SVN背景的人，你需要做一定的思想转换，来适应GIT提供的一些概念和特征。所以，这篇文章的主要目的就是通过介绍GIT能做什么、它和SVN在深层次上究竟有什么不同来帮助你认识它。
　　那好，这就开始吧&
1.GIT是分布式的，SVN不是：
　　这是GIT和其它非分布式的版本控制系统，例如SVN，CVS等，最核心的区别。如果你能理解这个概念，那么你就已经上手一半了。需要做一点声明，GIT并不是目前第一个或唯一的分布式版本控制系统。还有一些系统，例如,&等，也是运行在分布式模式上的。但GIT在这方面做的更好，而且有更多强大的功能特征。
　　GIT跟SVN一样有自己的集中式版本库或服务器。但，GIT更倾向于被使用于分布式模式，也就是每个开发人员从中心版本库/服务器上chect out代码后会在自己的机器上克隆一个自己的版本库。可以这样说，如果你被困在一个不能连接网络的地方时，就像在飞机上，地下室，电梯里等，你仍然能够提 交文件，查看历史版本记录，创建项目分支，等。对一些人来说，这好像没多大用处，但当你突然遇到没有网络的环境时，这个将解决你的大麻烦。
　　同样，这种分布式的操作模式对于开源软件社区的开发来说也是个巨大的恩赐，你不必再像以前那样做出补丁包，通过email方式发送出去，你只需要创建一个分支，向项目团队发送一个推请求。这能让你的代码保持最新，而且不会在传输过程中丢失。就是一个这样的优秀案例。
　　有些谣言传出来说subversion将来的版本也会基于分布式模式。但至少目前还看不出来。
2.GIT把内容按元数据方式存储，而SVN是按文件：
　　所有的资源控制系统都是把文件的元信息隐藏在一个类似.svn,.cvs等的文件夹里。如果你把.git目录的 体积大小跟.svn比较，你会发现它们差距很大。因为,.git目录是处于你的机器上的一个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分 支，版本记录等。
3.GIT分支和SVN的分支不同：
　　分支在SVN中一点不特别，就是版本库中的另外的一个目录。如果你想知道是否合并了一个分支，你需要手工运行像这样的命令，来确认代码是否被合并。感谢Ben同学指出这个特征。所以，经常会发生有些分支被遗漏的情况。
　　然而，处理GIT的分支却是相当的简单和有趣。你可以从同一个工作目录下快速的在几个分支间切换。你很容易发现未被合并的分支，你能简单而快捷的合并这些文件。
4.GIT没有一个全局的版本号，而SVN有：
　　目前为止这是跟SVN相比GIT缺少的最大的一个特征。你也知道，SVN的版本号实际是任何一个相应时间的源代 码快照。我认为它是从CVS进化到SVN的最大的一个突破。因为GIT和SVN从概念上就不同，我不知道GIT里是什么特征与之对应。如果你有任何的线 索，请在评论里奉献出来与大家共享。
　　更新：有些读者指出，我们可以使用GIT的SHA-1来唯一的标识一个代码快照。这个并不能完全的代替SVN里容易阅读的数字版本号。但，用途应该是相同的。
5.GIT的内容完整性要优于SVN：
　　GIT的内容存储使用的是哈希算法。这能确保代码内容的完整性，确保在遇到磁盘故障和网络问题时降低对版本库的破坏。这里有一个很好的关于GIT内容完整性的讨论 &
　　GIT和SVN之间只有这五处不同吗？当然不是。我想这5个只是&最基本的&和&最吸引人&的，我只想到这5点。如果你发现有比这5点更有趣的，请共享出来，欢迎。
　　还有git是压缩后传输　　svn是一个一个文件传输　　所以git的网络流量比svn少很多
二、GRUNT和npm
1、Grunt是前端javascript的构造工具
2、Grunt和 Grunt 插件是通过&&安装并管理的，npm是&&的包管理器。
Grunt是什么？
Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩，编译，单元测试，代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务，你所需要做的只是配置好Grunt，这样能很大程度的简化你的工作。
如果在团队中使用Grunt，你只需要与其他人员约定好使用Grunt应该规避的问题，就能够很方便的自动化的处理大部分的常见工作任务，你所付出的努力几乎为0。
为什么要使用Grunt？
Grunt是一个庞大的生态系统，每天都在成长。你可以自由的选择数以百计的插件以帮助你自动化的处理任务。
如果你所需要的插件还没有被人创建, 那么你可以自己创建插件并通过npm很方便的发布以供更多人使用并一起完善.
Grunt都有哪些插件？
大多数的任务Grunt都提供了可用的Grunt插件，并且每天都有插件诞生并发布到社区中。我想你所熟悉的有：
Uglify & &npm install &grunt-contrib-uglify
cssmin &grunt-contrib-cssmin
CoffeeScript
grunt-contrib-concat
等等。更多的插件可以在Grunt官方的中查看。
插件安装命令：在控制台中找到指定的项目目录
插件安装在当前项目：npm install &grunt-contrib-uglify
-g 安装在所有项目中：npm install &-g grunt-cli
压缩合并js文件
1、grunt-contrib-concat
2、grunt-contrib-uglify
3、grunt-init
Grunt任务配置
　　Grunt项目是通过Gruntfile.js来配置的
　　你也可以通过Gruntinit来进行配置，安装npm &install grunt-init
一、配置中的符号
　　你只需要知道如何在文件路径匹配过程中使用它们即可：
*：匹配任意数量的字符，但不匹配/
?：匹配单个字符，但不匹配/
**：匹配任意数量的字符，包括/，只要它是路径中唯一的一部分
{}：允许使用一个逗号分割的列表或者表达式
!：在模式的开头用于否定一个匹配模式(即排除与模式匹配的信息)
二、配置的属性
expand：设置true用于启用下面的选项：
cwd：相对于当前路径所匹配的所有src路径(但不包括当前路径。)
src：相对于cwd路径的匹配模式。
dest：目标文件路径前缀。
ext：使用这个属性值替换生成的dest路径中所有实际存在文件的扩展名(比如我们通常将压缩后的文件命名为.min.js)。
flatten：从生成的dest路径中移除所有的路径部分。
rename：对每个匹配的src文件调用这个函数(在执行ext和flatten之后)。传递dest和匹配的src路径给它，这个函数应该返回一个新的dest值。 如果相同的dest返回不止一次，每个使用它的src来源都将被添加到一个数组中。
三、配置基础框架
1 module.exports = function(grunt) {
// 配置项目
grunt.initConfig({
// 配置任务
// 加载任务
grunt.loadNpmTasks('grunt任务插件名');
// 默认任务.
grunt.registerTask('default', ['任务名']);
哪些人都在使用Grunt？
众所周知的有：
等等。还有更多的人在使用Grunt，比如：你。
如何配置grunt建议阅读：&
grunt使用小记之uglify：最全的uglify使用DEMO：
grunt-contrib-uglify
uglify是一个文件压缩插件，项目地址：
本文将以一个DEMO来展示如何使用uglify插件。
package.json:
"name": "grunt-demo",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
DEMO文件结构：
其中js文件夹就是用来测试的，Gruntfile.js稍后介绍，其中a.js内容如下：
(function() {
//output hello grunt
var helloGrunt = "Hello Grunt!(From a.js)";
console.log(helloGrunt);
b.js内容如下：
(function() {
//output hello world
var helloWorld = "Hello World!(From b.js)";
console.log(helloWorld);
下面我们来配置四个任务：
压缩a.js，不混淆变量名，保留注释，添加banner和footer
压缩b.js，输出压缩信息
按原文件结构压缩js文件夹内所有JS文件
合并压缩a.js和b.js
Gruntfile.js
现在直接通过Gruntfile.js来看看这四个任务的配置：
module.exports = function(grunt){
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'//添加banner
builda: {//任务一：压缩a.js，不混淆变量名，保留注释，添加banner和footer
options: {
mangle: false, //不混淆变量名
preserveComments: 'all', //不删除注释，还可以为 false（删除全部注释），some（ @license @cc_on等注释）
footer:'\n/*! &%= pkg.name %& 最后修改于： &%= grunt.template.today("yyyy-mm-dd") %& */'//添加footer
'output/js/a.min.js': ['js/a.js']
buildb:{//任务二：压缩b.js，输出压缩信息
options: {
report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip
'output/js/b.min.js': ['js/main/b.js']
buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
expand:true,
cwd:'js',//js目录下
src:'**/*.js',//所有js文件
dest: 'output/js'//输出到此目录下
release: {//任务四：合并压缩a.js和b.js
'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify:release']);
grunt.registerTask('mina', ['uglify:builda']);
grunt.registerTask('minb', ['uglify:buildb']);
grunt.registerTask('minall', ['uglify:buildall']);
通过上面的代码，我们很容易就可以看到上面四个任务的配置方式。
任务一：压缩a.js，不混淆变量名，保留注释，添加banner和footer
运行 grunt mina 命令，生成的a.min.js如下：
/*! grunt-demo
!function(){//output hello grunt
var helloGrunt="Hello Grunt!(From a.js)";console.log(helloGrunt)}();
/*! grunt-demo 最后修改于：
跟我们的目标一致。
任务二：压缩b.js，输出压缩信息
运行 grunt minb 命令，生成的b.min.js如下：
/*! grunt-demo
!function(){var a="Hello World!(From b.js)";console.log(a)}();
命令执行情况：
我们可以看到输出了压缩信息
任务三：按原文件结构压缩js文件夹内所有JS文件
运行 grunt minall 命令，生成目录结构如下：
其中a.min.js和b.min.js是任务一和任务二生成的，压缩后的output/js/a.js内容如下：
/*! grunt-demo
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}();
output/js/main/b.js内容如下：
/*! grunt-demo
!function(){var a="Hello World!(From b.js)";console.log(a)}();
任务四：合并压缩a.js和b.js
运行 grunt命令，生成的output/index.min.js内容如下：
/*! grunt-demo
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}(),function(){var a="Hello World!(From b.js)";console.log(a)}();
至此，本节uglify插件的介绍就结束了，对本文或使用过程中有任何问题，欢迎留言讨论。
一、Grunt这货是啥？
最近很火的前端自动化小工具，基于任务的命令行构建工具&
二、Grunt能帮我们干啥？
在开始介绍前，先向大家描述下面的场景:
【场景1：项目开始前】
先建立一个 projA 的文件夹 再建 html css js images （建5个或以上文件夹，花费1分钟）
拷贝 CSS库（Yui Reset bootstrap）JS库（Requiet.js Seajs jQuery jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css && （建N个文件，花费N分钟）
【场景2：编码中】
编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 &&&&
键盘就这样杯具了&.
【场景3：编码完成】
HTML去掉注析、换行符 & HtmlMin
CSS文件压缩合并 & CssMinify
JS代码风格检查 & JsHint
JS代码压缩 & Uglyfy
image压缩 & imagemin
在一个项目过程中，重复而枯燥的工作太多了&.&绳命就这样浪费了。
我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool&
三、Grunt安装配置
1、安装 grunt-cli
1. 自备node环境(&0.8.0), npm包管理
2. 卸载旧版本grunt（&0.4.0） (没装过请忽略)
&code&npm uninstall grunt -g&/code&
安装grunt-cli
&code&npm install grunt-cli -g&/code&
2、安装 grunt-init(可选)
npm install grunt-init -g
可选安装，grunt-init是个脚手架工具，它可以帮你完成项目的自动化创建，包括项目的目录结构，每个目录里的文件等。具体情况要看你运行grunt-init指定的模板，以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂，本章暂不展开讨论，有兴趣的童鞋可私下了解。
3、配置 grunt
从官网下载package.json Gruntfile.js 文件放到项目根目录，并对文件进行修改配置.
package.json&//项目自动化所依赖的相关插件。
Gruntfile.js&//项目自动化工作流配置文件，重要
1. package.json 文件修改&
2. Gruntfile.js 文件修改&
四、开始一个实例
这里以projA为例子，实现的自动化功能如下：
编码过程中自动监控projA目录，如果 .html/ .css/ .js文件变更时，自动刷新浏览器。
编码完成后，压缩html、css、js、img文件,并存放到dist/目录下。
对应的操作步骤如下：
先配置好package.json、Gruntfile.js两个文件，
执行命令自动下载相对应的Grunt插件命令行执行:
&code&npm install&/code&
启动文件变更监控(livereload)命令行执行:
&code&grunt live&/code&
编码完成后Build命令行执行:
&code&grunt build&/code&
五、Grunt使用总结
配置简单，配置文件Gruntfile.js是JS格式，比较贴近前端知识点。相对Ant之类基于JAVA,又是xml配置，相对来说学习成本低。
Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。比如：haml less coffeeScript dataURI
&每个人的具体需求不一样，可以按自己的习惯合理配置，组合成最适合自己的自动化工作流。
Grunt团队很勤劳，社区活跃，有兴趣可以持续关注。
http://handyxuefeng./blog/static//?latestBlog
/tools/grunt-tutorial-start-grunt.html
/wordpress/2013/01/uglifyjs-compress-js/
http://www.gruntjs.net/docs/installing-grunt/
1、Grunt工具：自动构建，可以使用一些插件，
2、npm：包管理器
3、nodeJS：需要一个node的环境
三、spm的安装和使用
一、使用spm的原因
　　项目中使用seajs来模块化开发，使用grunt进行压缩合并会有问题，然后就解决方法搜索中...
　　/wordpress/2012/07/seajs-node-nodejs-spm-npm/，在这里发现seajs与spm是个完美的结合
二、安装spm
　　spm需要先安装node环境和git版本控制工具
　　1、cmd打开控制台，要安装spm的目录下，输入安装命令 npm install spm -g
　　2、配置压缩合并
seajs自带的spm打包工具相关文档略少，在粗读了一点源代码之后，我摸索出了spm使用上的一些要点，记录为此文
压缩JS文件
　　只需要执行这个命令即可 &&spm build xxx.js
　　这时候你将得到一个压缩过的__build/xxx.js文件
合并JS文件
　　如果希望将JS文件中require的其他模块都合并到这个文件中，我们可以加上--combine参数，另外记得这时候必须传递--app_url参数，用于生成module的id，如
　　spm build xxx.js --combine --app_url http:
　　你将与上面一样得到一个__build/xxx.js文件，但是这个js中require的模块也都合并在这个文件中了
合并JS文件的规则
　　一般说来，前端优化时，并非链接数越少越好，对于通用JS类库，由于在多个页面中都会被引用，单独加载可以利用到浏览器缓存
　　spm在合并时，也考虑到了这种情况，因此它遵循这样一个规则，即只合并require的&相对标识&的模块，而不合并require的&顶级标识&的模块对&相对标识&和&顶级标识&不了解的参见
　　为什么是这样一条规则呢？因为seajs的作者推荐使用这样一条规则来require模块：推荐使用 require('xxx') 这种方式引用通用类库，使用 require('./xx') 或 require('../path/to/yy') 引用业务模块&
　　所以，spm在合并时，不会合并通用类库的模块，而判断是否是通用类库的依据就是&相对标识&与&顶级标识&，因此这也要求我们在书写代码时，需要遵守以上的规则
强制合并通用类库
　　某些特殊情况下，我们希望将通用类库也合并进来，当然最简单的办法就是在代码中使用&相对标识&来require通用类库，不过这个办法实在太蠢而且spm也有相应的处理方案，我们需要添加--combine_all参数，但是这时候我们还必须传递--base_path参数，指定通用类库所在的文件夹，也就是seajs的base路径命令参考如下
spm build xxx.js --combine_all --app_url http:
输出文件路径
　　默认情况下，spm会把文件输出到当前文件同级的__build子文件夹下，在以上几点的例子里面已经看到了　　spm也支持用--out_path参数自定义路径，而且如果有同名文件的话会自动覆盖，这点在部署时候做自动化替换很有用　　命令参考如下
spm build xxx.js --combine --app_url http:
以上命令会将当前的xxx.js替换为合并后的
app_path参数
以上的讨论，都是假设JS文件位于&根&下面，也就是说假设js在文件系统的目录为D:\project\xxx.js，而未来部署后，访问路径为那么进入D:\project目录，执行spm build xxx.js --combine --app_url&命令，这时候build出的文件是没有问题的
下面考虑一下复杂的情况：假设js在文件系统中位于D:\project\javascript\xxx.js，而部署后，访问路径为那么如果我们进入D:\project\javascript目录，执行上述同样命令，这时候build出的文件是有问题的，哪里有问题呢？打开build出的文件一看就知道了一般这时候文件中define的id语句是这样的
define("http:
明显这是有问题，我们期望编译出的id应该是，假设路径再深一点，如果存在两个同名而目录不同的js，就会存在define id重复了那么如何解决呢？我发现spm还提供一个--app_path参数，尝试执行以下命令，将项目的&根&路径做为--app_path参数
cd D:\project
spm build javascript\xxx.js --combine --app_url http:
这时候因为out_path为. 所以xxx.js已经被替换掉了，打开发现define id正确无误，是这是因为当传递了--app_path参数时，spm会计算要合并的js文件的路径与这个路径的相对路径，举例来说，就是计算出D:\project\javascript\xxx.js与D:\project的相对路径，也就是javascript\xxx.js，然后将这个路径再与--app_url参数连接，作为define的id
注意：但是这里有个问题，如果不指定--out_path时，spm会出错，因为这时候--out_path默认为D:\project\javascript_build\javascript，而似乎spm只能新建_build文件夹，对于下级文件夹不会再新建，所以会报错
使用build-config.js
如果不希望在敲命令时候传那么多乱七八糟的参数，可以将这些参数写在build-config.js里面，如下
module.exports = {
"base_path": "../",
"app_url": "http:
当你在某个目录下执行spm build命令时，spm会自动寻找当前目录下有没有build-config.js文件，如果有则将内容解析为参数当然如果你不喜欢这个名字，你还可以在执行spm命令时，用--config指定build配置文件
loader_config参数
如果你在某个js文件中，使用了seajs.config做了alias的配置，则打包时，需要传递--loader_config参数，将文件传给spm
五、seajs 压缩打包部署实例
1、安装nodejs(详情见百度)
2、下载官方示例
解压到桌面
在C:\Users\Administrator\Desktop\examples-master\static文件新建文件夹login(例),然后在login文件夹下新建src,拷入相关js
注意：js需要模块化
jquery 模块化 方法一：打开jquery文件,最后添加;$.noConflict();
方法二：用cmd命令或用linux系统终端命令在C:\Users\Administrator\Desktop\examples-master文件夹下，输入 spm install jquery
方法三：打开jquery文件,打开文件添加以下内容：
1 define(function(require,exports,module){
// 添加jquery源码
return $.noConflict();
6 jquery 插件模块化 从jquery官网下载相关插件，打开文件添加以下内容：
8 define(function(require,exports,module){
// 如果要引用jquery,添加 var $ = require('jquery');
// 添加插件源码
自己写的js模块化，打开文件添加以下内容：
1 define(function(require,exports,module){
3 // 如果要引用jquery,添加 var $ = require('jquery');
5 // 添加插件源码
如果没有添加seajs,用cmd命令或用linux系统终端命令在C:\Users\Administrator\Desktop\examples-master文件夹下，输入 spm install seajs
2. 用cmd命令或用linux系统终端命令在C:\Users\Administrator\Desktop\examples-master\static\login\两个文件Makefile和package.json,从hello文件夹下拷贝即可
3.编写package.json内容如下：
"name": "login",// 当前目录
"family": "cp",// 父目录
"description": "JavaScript library for DOM operations",
"version": "0.0.1",// 版本号,没有多大意思,就当成文件夹
"alias" : {
"jquery" : "jquery",// 引入jquery
"slide" : "slide",// 引入jquery插件
"cookie" : "cookie",// 引入jquery插件
"encrypt" : "encrypt"// 引入普通
"output": ["*.js"]
// *.js 是指单独压缩当前文件夹下每个js文件,也可以压缩css,即*.css，将所有js或css合并压缩，即"output": ["main.js","main.css"]
　　注意：name,family,version三个属性命名缺一不可，name,family命名不能重复与C:\Users\Administrator\Desktop\examples-master\sea-modules文件的相对应，sea-modules文件夹为部署文件夹
　　用cmd命令或用linux系统终端命令在C:\Users\Administrator\Desktop\examples-master\static\login\下输入命令spm-build(linux下)，spm build(windows下)
4.编写Makefile内容如下
2 @spm build
5 @rm -rf ../../sea-modules/cp
6 @mkdir ../../sea-modules/cp
7 @mkdir ../../sea-modules/cp/login
8 @mkdir ../../sea-modules/cp/login/0.0.1
9 @cp dist/*.* ../../sea-modules/cp/login/0.0.1
11 @echo " deploy to seajs-modules/cp/login/0.0.1"
注：4.1 rm:删除命令，mkdir:创建文件夹，cp:拷贝文件，echo:注解
4.2 删除文件和创建文件与package.json中name,family,version一一对应
用cmd命令或用linux系统终端命令在C:\Users\Administrator\Desktop\examples-master\static\login\下输入命令make deploy,执行完此命令就可以在sea-modules文件夹下生成相应部署文件
5.编写正式文件login.jsp
1 &script type="text/javascript" src="module/sea-modules/seajs/seajs/2.2.1/sea.js"&&/script&
2 &script type="text/javascript"&
3 // For development
4 if (location.href.indexOf("?dev") & 0) {
5 seajs.config({
6 　　alias : {
7 　　　　'jquery-debug' : 'jquery/jquery/1.10.1/jquery-debug.js',
8 　　　　'slide-debug' : 'common/util/0.0.1/jquery.slide-debug.js',
9 　　　　'cookie-debug' : 'common/util/0.0.1/jquery.cookie-debug.js',
10 　　　　'encrypt-debug' : 'common/util/0.0.1/encrypt-debug.js',
11 　　　　'common-bsk-debug' : 'common/util/0.0.1/common-bsk-debug.js'
13 　　charset : 'utf-8',
14 　　preload : [Array.isArray ? '' : 'jquery-debug']
16 seajs.use("cp/login/0.0.1/client_login-debug.js");
18 // For production
20 seajs.config({
21 　　alias : {
22 　　　　'jquery' : 'jquery/jquery/1.10.1/jquery.js',
23 　　　　'slide' : 'common/util/0.0.1/jquery.slide.js',
24 　　　　'cookie' : 'common/util/0.0.1/jquery.cookie.js',
25 　　　　'encrypt' : 'common/util/0.0.1/encrypt.js',
26 　　　　'common-bsk' : 'common/util/0.0.1/common-bsk.js'
28 　　charset : 'utf-8',
29 　　preload : [Array.isArray ? '' : 'jquery']
31 seajs.use("cp/login/0.0.1/client_login.js");
33 &/script&
34 注：为了兼容ie6、7、8,这里使用jquery1.10.1版本
6.enjoy it!!!
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
Gulp.js-比Grunt更易用的前端构建工具
Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的 ...
Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因 ...
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的AP ...
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧今天网站要做一些优化:图片压缩,资源合并等以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的相关插件,于是找到了腾讯的智图,而智图目前提供的插件只有gulp-imageisux无奈之下,只好去学习gulp这款工具了,下面是gulp的相关介绍: gulp介绍 ...
前端构建工具gulp入门教程 老婆婆 1.8k 日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最 ...
gulp常用插件的使用 今天来看看一下gulp的常用插件的使用 就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfile.js. 在项目根目录下新建文件gulpfile.js文件 目录结构 ├── gulpfile.js ├── node_modules │ └── gulp
Mod 是可信赖的现代前端构建工具, 旨在快速构建健壮且高性能的Web应用程序
Mod 是可信赖的现代前端构建工具, 旨在快速构建健壮且高性能的Web应用程序是腾讯开源的一个前端构建工具,不错哦!现在开始构建之旅吧1. 安装 node.js