使用grunt构建seajs项目
1.安装nodejs
2.安装grunt-cli
npm install -g grunt-cli
3.进入到项目目录,同时准备好package.json和Gruntfile.js文件
//package.json文件内容,其中alias指定了jquery的路径,后面一坨是需要用到的grunt插件
{
"name": "seajs_test",
"version": "1.0.0",
"spm": {
"alias": {
"jquery": "lib/jquery-debug"
}
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cmd-transport": "~0.3.0",
"grunt-cmd-concat": "~0.2.5",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-clean": "~0.5.0"
}
}
//gruntfile.js文件内容
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
transport: {
options: {
paths: ['js'], // where is the module, default value is ['sea-modules']
alias:'<%= pkg.spm.alias %>'
},
helloworld: {
options: {
idleading: 'helloworld/'
},
files: [
{
cwd: 'js/helloworld',
src: '**/*.js',
dest: '.build/helloworld'
}
]
},
main: {
options: {
idleading: 'main/'
},
files: [
{
cwd: 'js/main',
src: '**/*.js',
dest: '.build/main'
}
]
},
lib: {
options: {
idleading: 'lib/'
},
files: [
{
cwd: 'js/lib',
src: '**/*.js',
dest: '.build/lib'
}
]
}
},
concat: {
options: {
include: 'relative'
},
build: {
files: {
'dist/helloworld/klass.js': ['.build/helloworld/klass.js', '.build/helloworld/circle.js'],
'dist/main/index.js': ['.build/main/index.js'],
'dist/lib/jquery-debug.js':['.build/lib/jquery-debug.js']
}
}
},
uglify: {
main: {
files: {
'dist/helloworld/klass.js': ['dist/helloworld/klass.js'],
'dist/main/index.js': ['dist/main/index.js'],
'dist/lib/jquery-debug.js':['dist/lib/jquery-debug.js']
}
}
},
clean: {
build: ['.build'] // clean .build directory
}
});
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask("test","my custom task",function(){
console.log("hello grunt");
});
grunt.registerTask('default', ['transport', 'concat', 'uglify', 'clean','test']);
};
4.执行命令
grunt default
其中default就是Gruntfile最后定义的任务名称。
5. 项目目录结构

使用grunt构建seajs项目的更多相关文章
- Grunt 构建SeaJS
GitHub地址:https://github.com/MrLeo/SeaJS 目录结构 目录结构说明 web存放HTML文件 static存放所有HTML需要用到静态资源文件(css.js.img- ...
- Grunt打包seajs项目
在使用seajs时,常常将若干脚本分为多次require进来,这样开发中比较方便,但是,会增加http请求次数,在生产环境中需要进行打包合并.压缩等操作. 以Grunt构建工具为例,对一个seajs项 ...
- 用spm2构建seajs项目的过程
前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...
- 使用grunt构建前端项目
1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs 2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息 3. 在需要用到的 ...
- grunt构建一个项目
准备工作:grunt基于node环境运行,所有先安装node.js 1.安装grunt,通过node的npm的包管理工具 >npm install grunt --save-dev 2.npm ...
- ☀【SeaJS】SeaJS Grunt构建
如何使用Grunt构建一个中型项目?https://github.com/twinstony/seajs-grunt-build spmjshttp://docs.spmjs.org/doc/inde ...
- Grunt打包之seajs项目【转】
原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...
- grunt与seajs结合应用
9.seajs构建的问题 01.png和02.jpg 10.seajs与grunt如何结合开发.两个插件:grunt-cmd-transport grunt-cmd-contact ,去grunt官网 ...
- Yeoman自动构建js项目
Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...
随机推荐
- 微软发布手机版 Sample Browser。7000多示例代码一手掌握
今天早上,Sample Browser发布其全新的Windows Phone版本.至此,自2012年相继推出Desktop版.Visual Studio版,以及2013年推出Windows Store ...
- Nodejs学习笔记(十四)— Mongoose介绍和入门
目录 简介 mongoose安装 连接字符串 Schema Model 常用数据库操作 插入 更新 删除 条件查询 数量查询 根据_id查询 模糊查询 分页查询 其它操作 写在之后... 简介 Mon ...
- atitit.为什么java体系开发效率这样低的原因and解决
atitit.为什么java体系开发效率这样低的原因and解决 #---开发理念问题(影响度:很大的,2-3倍效率) mvc<>webform server control ajax< ...
- 苹果App Store审核指南中文翻译(2014.9.1更新)
转:http://www.cocoachina.com/appstore/20140901/9500.html CocoaChina对<苹果应用商店审核指南>中文翻译最近一次更新时间为20 ...
- javaweb学习总结(二十七)——jsp简单标签开发案例和打包
一.开发标签库 1.1.开发防盗链标签 1.编写标签处理器类:RefererTag.java 1 package me.gacl.web.simpletag; 2 3 import java.io.I ...
- mac下mysql数据库的配置
这里记录一下. 之前在mac下使用brew install mysql安装,但是安装完成后发现密码不好修改,上网搜了下发现mac下使用命令行安装mysql确实存在很多问题,这一点确实远不如Ubuntu ...
- python读文件
第一种方法 #encoding=utf-8 file = open("./man_data.txt","r") try: print file.read() f ...
- python None与Null
一.Python对象 要理解这个,首先要理解Python对象: python对象具有三个特性:身份.类型.值. 三特性在对象创建时被赋值.只有值可以改变,其他只读. 类型本身也是对象. 二.Null与 ...
- C#中的函数式编程
在函数式编程中,可以把函数看作数据.函数也可以作为参数,函数还可以返回函数.比如,LINQ就是基于函数式编程的. 两个例子引出函数式编程 语句式编程可能这样写: string result; ) { ...
- HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...