在使用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项目的更多相关文章

  1. 使用grunt构建seajs项目

    1.安装nodejs 2.安装grunt-cli npm install -g grunt-cli 3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 //packa ...

  2. Grunt打包之seajs项目【转】

    原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...

  3. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  5. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  6. 使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  7. 【grunt整合版】 30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  8. 30分钟学会使用grunt打包前端代码【mark】

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  9. 【grunt整合版】学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

随机推荐

  1. Redis——windows环境安装redis和redis sentinel部署

    一:Redis的下载和安装 1:下载Redis Redis的官方网站Download页面,Redis提示说:Redis的正式版不支持Windows,要Windows学习Redis,请点击Learn m ...

  2. mysql 时间函数 时间转换函数

    时间函数 Now 获取当前时间 current_timestamp 获取当前时间 localtimestamp 时间转换 UNIX_TIMESTAMP    "2009-09-15 00:0 ...

  3. Oracle第一波

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. vue数组语法兼容问题

    先来一行代码: <a :href="['NewsNote.asp?ID='+item.ID+'&MenuType=C']" v-text="item.Tit ...

  5. 为什么ABAP开发者需要使用面向对象技术?

    ABAP对面向对象的支持已有十多年的历史,然而在生产实践中,我们对这门技术的应用十分有限. 一方面,面向过程的惯性长期存在着:另一方面,对于大部分二次开发工作而言,似乎并没有足够的理由促使开发者使用面 ...

  6. 简单Elixir游戏服设计- 创建项目

    反正是写到哪算哪. 创建umbrella项目 mix new simple_game --umbrella 创建model项目 cd simple_game\apps mix new model 创建 ...

  7. MongoDB学习教程(3)-常用命令

    1.MongoDB 条件操作符 描述 条件操作符用于比较两个表达式并从mongoDB集合中获取数据. 在本章节中,我们将讨论如何在MongoDB中使用条件操作符. MongoDB中条件操作符有: (& ...

  8. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. Vue实现选项卡切换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. haproxy + keepalived 实现网站高可靠

    haproxy 1的配置文件,包括 keepalived 和 haproxy 的配置,分别如下: [haproxy 1的keepalived 配置文件]  /etc/keepalived/keepal ...