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

  1. Grunt 构建SeaJS

    GitHub地址:https://github.com/MrLeo/SeaJS 目录结构 目录结构说明 web存放HTML文件 static存放所有HTML需要用到静态资源文件(css.js.img- ...

  2. Grunt打包seajs项目

    在使用seajs时,常常将若干脚本分为多次require进来,这样开发中比较方便,但是,会增加http请求次数,在生产环境中需要进行打包合并.压缩等操作. 以Grunt构建工具为例,对一个seajs项 ...

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

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

  4. 使用grunt构建前端项目

    1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs 2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息 3. 在需要用到的 ...

  5. grunt构建一个项目

    准备工作:grunt基于node环境运行,所有先安装node.js 1.安装grunt,通过node的npm的包管理工具 >npm install grunt --save-dev 2.npm ...

  6. ☀【SeaJS】SeaJS Grunt构建

    如何使用Grunt构建一个中型项目?https://github.com/twinstony/seajs-grunt-build spmjshttp://docs.spmjs.org/doc/inde ...

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

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

  8. grunt与seajs结合应用

    9.seajs构建的问题 01.png和02.jpg 10.seajs与grunt如何结合开发.两个插件:grunt-cmd-transport grunt-cmd-contact ,去grunt官网 ...

  9. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

随机推荐

  1. MVP

    引自: http://www.cnblogs.com/Leo_wl/archive/2013/05/03/3056299.html http://www.codeproject.com/Article ...

  2. [Java Web整合开发王者归来·刘京华] 2、 Java Web开发概述

    1.Web相关概念 1-1.胖客户与瘦客户 >_<" RCP的定义及优缺点:       >_<"TCP的定义及优缺点:             1-2.B ...

  3. [OpenCV] 3、直线提取 houghlines

    >_<" 发现一个好的链接,是一个讲openCV的网站:http://www.opencv.org.cn/opencvdoc/2.3.2/html/index.html > ...

  4. [ACM_几何] UVA 11300 Spreading the Wealth [分金币 左右给 最终相等 方程组 中位数]

    Problem A Communist regime is trying to redistribute wealth in a village. They have have decided to ...

  5. [JS7] 显示从0到99的100个数字

    <html> <head> <title>JS Unleashed</title> </head> <body> <SCR ...

  6. 谷歌(Chrome)浏览器调试JavaScript小技巧

    谷歌浏览器不仅仅可以用来上网,对于开发人员来说,它更像是一款强大的开发辅助工具. 工欲善其事必先利其器,接下来笔者给大家分享一些Chrome的使用方法. 假如读者了解如何在Chrome中添加JavaS ...

  7. C#与数据库访问技术总结(十七)

    使用DataSet对象访问数据库 当对DataSet对象进行操作时,DataSet对象会产生副本,所以对DataSet里的数据进行编辑操作不会直接对数据库产生影响,而是将DataRow的状态设置为ad ...

  8. 自制一个能显示helloworld的最简单OS

    <自己动手写操作系统> org 07c00h mov ax,cs mov ds,ax mov es,ax call DispStr jmp $ DispStr: mov ax,BootMe ...

  9. 教程:使用Diskpart创建、扩展或删除磁盘分区

    在Windows Server环境下进行基本的磁盘操作时,管理员可以使用Disk Partition Utility或Diskpart等工具.后者是一个命令行解释器,可作为磁盘管理工具. 管理员可以使 ...

  10. 使用Excel制作万年历(可打印)

    先来看看A4纸打印效果,其他功能后续继续完善中. 年份数据字典(农历节日) 农历节日表 年度 春节 元宵节 龙抬头 端午节 六月六 七月七 七月十五 仲秋节 除夕 2010年02月14日 2010年0 ...