Grunt打包seajs项目
在使用seajs时,常常将若干脚本分为多次require进来,这样开发中比较方便,但是,会增加http请求次数,在生产环境中需要进行打包合并、压缩等操作。
以Grunt构建工具为例,对一个seajs项目打包:
普通的项目,直接对脚本进行合并、压缩接口,但是seajs中会涉及到动态引入的依赖脚本,需要对依赖的脚本也进行合并压缩操作。
具体思路是:
一般在使用define定义一个模块时,通常省略了moduleID标识的声明,而且seajs是依赖后置的,根据需要随时引入依赖脚本,所以依赖信息在定义的也未声明,需要去解析获取这些信息。Grunt中提供了一个grunt-cmd-transport插件,专门用于提取模块的moduleId和依赖dependencies信息。将各脚本以define(moduleId,[dep1,dep2,..],function (){})的形式重新定义,明确了模块的id和依赖数组,将这些重新定义的脚本放置在一个临时文件夹里如build中,然后对这里面的文件进行合并、压缩。
项目的目录结构:

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//找出依赖文件,将依赖的文件由匿名模块变为具名模块(定义moduleID),放在一个临时目录里.build
transport:{
options:{
path:['.']
},
utils:{
options:{
//format : 'dist/modules/{{filename}}' //生成的id的格式
idleading:'dist/modules/' //最终引用的js脚本的位置, (依赖脚本的moduleID以idleading作为相对路径)
//如transport后的形式 define("dist/modules/codewin/codewin", [], function(require, exports, module) {
},
files:[{
expand: true,
cwd: 'modules/', //将modules下的所有js脚本进行transport操作,将生成的文件存放在.build/modules下
src: '**/*.js',
filter: 'isFile',
dest: '.build/modules/'
}
]
},
//单独对另一路径下的一个文件index.js进行transport
index:{
options:{
idleading:'dist/js/' //最终引用的js脚本的位置 define('dist/js/*',[],function (){})
},
files:[{
expand: true,
cwd: 'js',
src: 'index.js',
filter: 'isFile',
dest: '.build/js'
}
]
}
},
concat : {
options : {
separator: '/*-------每个文件的分割-------*/',
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
footer: '/*-------合并文件的footer-------*/'
},
sub: {
src: ['.build/modules/codewin/*.js','!.build/modules/codewin/*-debug.js','.build/modules/head/head.js'],
dest: '.build/util.js' //合并临时目录.build中的依赖脚本
},
all : {
src: ['.build/js/index.js','.build/util.js'], //将依赖的脚本与主文件进行合并
dest: 'dist/all.js'
}
},
/**
* 压缩 合并后的 文件
*/
uglify: {
hellosea: {
files: {
'dist/all.js': ['dist/all.js'] //对dist/all.js进行压缩,之后存入dist/all.js文件
}
}
},
clean:{
build : ['.build'] //清除临时文件夹.build文件
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-contrib-concat'); //这里使用的是contrib-concat进行的合并,使用cmd-concat会出现错误,还没弄懂啥原因
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('default',['transport','concat','uglify','clean']);
}
Grunt打包seajs项目的更多相关文章
- 使用grunt构建seajs项目
1.安装nodejs 2.安装grunt-cli npm install -g grunt-cli 3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 //packa ...
- Grunt打包之seajs项目【转】
原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- 用spm2构建seajs项目的过程
前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...
- 【grunt整合版】30分钟学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 【grunt整合版】 30分钟学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 30分钟学会使用grunt打包前端代码【mark】
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 【grunt整合版】学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
随机推荐
- CA认证和颁发吊销证书
摘要:涉及到网络安全这一块,想必大家都听过CA吧.像百度.淘宝.京东等这些知名网站,每年都要花费一笔money来买CA证书.但其实简单的企业内的CA认证,我们自己就可以实现,今天小编我就讲解一下怎么在 ...
- TCP/IP(三)数据链路层~2
一.局域网 1.1.局域网和以太网的区别和联系 局域网:前面已经介绍了,其实就是学校里面.各个大的公司里,自己组件的一个小型网络,这种就属于局域网. 以太网:以太网(Ethernet)指的是由Xero ...
- 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ---线程优先权(Thread priority)
有没有过这样的经验?你坐在你的车子里,目的地还在好几公里之遥,而时间已经很晚了.你拼命想告诉那些挡住你去路的人们,今天这个约会对你是多么多么重要,能不能请他们统统--呃--滚到马路外?很不幸,道路系统 ...
- 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ---简介
这一章描述如何初始化一个新线程,如何停止一个执行中的线程,以及如何了解并调整线程优先权. 读过这一章之后,你将有能力回答一个 Win32 多线程程序设计的最基本问题.你一定曾经在 Usenet ...
- Springboot 学习笔记 ①
前言 之前一直在寻找Springboot的学习资料,终于得偿所愿...那么,先给自己定一个小目标 - 能够使用Springboot这套架构来搭建自己的服务. 准备阶段 1. 开发环境 开发环境其实还是 ...
- html5获取用户当前的地理位置,即经纬度。
$("document").ready(function(){ getMap(); }); function getMap(){ // 百度地图API功能 var map = ne ...
- 简单Elixir游戏服务器-安装Elixir
用WebInstaller 安装半天也没下载成功文件. 改成直接下载erlang 和 elixir 预编译包了. 安装很简单,最后设置好环境变量. cmd 执行 elixir -v 最后顺便下载了个g ...
- 入门VMware Workstation下的Debian学习之Vim简单使用(三)
什么是Vim? Vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序设计. Vim是从vi发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广 ...
- ASP.NET没有魔法——ASP.NET MVC 与数据库之EntityFramework配置与连接字符串
前几篇文章中介绍了如何使用Entity Framework来操作数据库,但是对EF的配置.连接字符串的指定仍然存在一些疑问. 本章将对EF的配置进行介绍. EF可以通过两种方式来实现配置,分别是代码方 ...
- es6零基础学习之项目目录创建(一)
和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习 首先创建项目目录 打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6 创建一个完整的 ...