如何使用Grunt构建一个中型项目？
https://github.com/twinstony/seajs-grunt-build

spmjs
http://docs.spmjs.org/doc/index

package.json

{

    "name": "hi",

    "version": "0.0.1",

    "devDependencies": {

        "grunt": "*",

        "grunt-cmd-transport": "*",

        "grunt-cmd-concat": "*",

        "grunt-contrib-clean": "*"

    }

}

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({

        transport: {

            options: {

                idleading: 'dist/'

            },

            target: {

                expand: true,

                cwd: '.',

                src: ['module1.js', 'module2.js'],

                dest: '.build'

            }

        },

        concat: {

            options: {

                include: 'relative'

            },

            target: {

                expand: true,

                cwd: '.build',

                src: ['*.js'],

                dest: 'dist'

            }

        },

        clean: {

            build: ['.build']

        }

    });

    grunt.loadNpmTasks('grunt-cmd-transport')

    grunt.loadNpmTasks('grunt-cmd-concat')

    grunt.loadNpmTasks('grunt-contrib-clean')

    grunt.registerTask('build', ['transport', 'concat'/*, 'clean'*/])

}

module1.js

define(function(require, exports, module) {

    var module1 = {}

    module1.say = function(word) {

        console.log(word)

    }

    module.exports = module1

})

module2.js

define(function(require, exports, module) {

    var module1 = require('./module1')

    module1.say('hi')

})

test.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="sea.js"></script>

    <script>

        seajs.use('./dist/module2')

    </script>

</body>

</html>

grunt build → dist/module2.js

define("dist/module2", [ "./module1" ], function(require, exports, module) { // 执行路径匹配的

    var module1 = require("./module1");

    module1.say("hi");

});

define("dist/module1", [], function(require, exports, module) {

    var module1 = {};

    module1.say = function(word) {

        console.log(word);

    };

    module.exports = module1;

});

grunt-cmd-transport

spmjs / grunt-cmd-transport
https://github.com/spmjs/grunt-cmd-transport

grunt-cmd-concat

spmjs / grunt-cmd-concat
https://github.com/spmjs/grunt-cmd-concat

dynamic mappings

☀【SeaJS】SeaJS Grunt构建的更多相关文章

  1. Grunt 构建SeaJS

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

  2. Grunt构建工具能做哪些事？

    Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...

  3. 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...

  4. 前端工程化系列[03]-Grunt构建工具的运转机制

    在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...

  5. 使用grunt构建前端项目

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

  6. 使用grunt构建seajs项目

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

  7. 实战案例--Grunt构建Web程序

    GruntJS构建Web程序.使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件,熟练了node.js安装和grunt.js安装后,接下来来实战一个案例,案例是根据snandy ...

  8. grunt 构建工具(build tool)初体验

    操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操 ...

  9. Grunt构建工具插件篇——之less工具2

    Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成.所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css.另 ...

随机推荐

  1. LAMP网站架构方案分析

    本文引自:http://www.williamlong.info/archives/1908.html LAMP(Linux-Apache-MySQL-PHP)网站架构是目前国际流行的Web框架,该框 ...

  2. SVN服务器的搭建 分类： 网络 2014-11-27 01:18 204人阅读 评论(4) 收藏

    一.首先来下载和安装SVN服务器 现在Subversion已经迁移到apache网站上了,下载地址: http://subversion.apache.org/packages.html 这是二进制文 ...

  3. WisDom.Net 框架设计(五) 权限设计

    WisDom.Net --权限设计 1.需求分析     基本在所有的管理系统中都离不开权限管理.可以这么说,权限管理是管理系统的核心所在. 权限管理说白一些就是每个人能够做什么,不能够做什么.可以说 ...

  4. [FTP] FTPHelper－FTP帮助类,常用操作方法 （转载）

    点击下载 FTPHelper.zip 这个类是FTP服务器的一些操作1.连接FTP服务器 2.上传3.下载4.删除文件5.获取当前目录下明细(包含文件和文件夹)  6.获取FTP文件列表(包括文件夹) ...

  5. Oracle Application Express (APEX 4.2) 中进行ajax调用

    Oracle Application Express 4.2 (APEX 4.2)是一个快捷的web应用开发工具.在开发网页的过程中有时候会用到ajax请求. 建立ajax请求的方式: 1.建立后台的 ...

  6. tomcat环境变量配置

    先下载tomcat的压缩包(绿色版),解压到C盘目录下即可. 在系统坏境中配置(高级系统设置>环境变量>系统变量) 新建变量名:CATALINA_HOME,变量值:C:\apache-to ...

  7. winform程序中界面的跳转问题

    首先是我们进行窗口间的跳转,尤其注意的是winform程序里面的空间都是中线程安全的.但是注意的是如果你在一个线程中操纵另外的控件,这时候会提示你一个错误,这个错误的解决方法准备单独的在另一篇文章中来 ...

  8. Repeater 动态增加删除一行

    文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...

  9. js原型解析

    我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...

  10. 谈memcache和memcached的区别

    用了段时间的memcache和memcached总结下认识,看很多人在用cache的时候,刚刚都没有搞清楚memcache 和 memcached的区别,还有就是使用的时候基本都是 get/set   ...