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. ActiveMQ第四弹:在HermesJMS中创建ActiveMQ Session

    Hermes JMS是一个开源免费的跨平台的JMS消息监听工具.它可以很方便和各种JMS框架集成和交互,可以用来监听.发送.接收.修改.存储消息等.这篇文章将讲解HermesJMS如何集成Active ...

  2. CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\f834824f\75776659\xxx.dll”--“拒绝访问。 ”

    解决方法: 1.找到C:\windows\Temp文件夹 右键属性-->安全选项卡,给IIS_IUSRS帐号赋予权限

  3. centos 防火墙设置

    1.安装iptables防火墙 怎么知道系统是否安装了iptables?执行iptables -V,如果显示如: iptables v1.3.5 说明已经安装了iptables. 如果没有安装ipta ...

  4. ServiceStack 概念

    目录 ServiceStack 概念 ServiceStack Web Service 创建与调用简单示列 ServiceStack ServiceStack是.Net和Mono的开源框架,相对WCF ...

  5. 常用基础OC 集合

    //    2016年07月19日17:50:53    集合 //七.NSSet 集合对象(容器类,) //  1. 使用类方法创建对象 NSSet *set1 = [NSSet set];  // ...

  6. java中static{}语句块详解

    static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法,下面我们详细的讨论一下该语句块的特性及应用. 一.在程序的一次执行过程中,stati ...

  7. java中获取比毫秒更为精确的时间

    所以这里提醒做非常精确的时间统计的朋友,谨慎使用System.currentTimeMillis() . 在Java中可以通过System.currentTimeMillis()或者System.na ...

  8. The web application [] appears to have started a thread named [Abandoned connection cleanup thread] com.mysql.jdbc.AbandonedConnectionCleanupThread

    01-Jul-2016 14:25:30.937 WARNING [localhost-startStop-1] org.apache.catalina.loader.WebappClassLoade ...

  9. Django抛错不存在(DoesNotExist)

    from django.core.exceptions import ObjectDoesNotExist try: disabledusers.objects.get(sAMAccountName= ...

  10. eclipse,myeclipse开发环境下,maven远程部署到tomcat7服务器(图文)

    有的人想在eclipse写java web 项目,通过maven也是一种实现的方法,可以实现java web 项目打包成war,发布到tomcat. 在pom.xml文件的build增加下面的代码,相 ...