requireJS,rjs,gulp简易实现

2017-01-13 10:48:03来源:segmentfault作者:小脑fu人点击


gulpfile.js


var gulp = require("gulp");
var rjs = require("requirejs");
function cb(){
console.log("构建完成")
}
gulp.task('build', function(cb){
rjs.optimize({
//文件输出路径
dir: './vajoy',
//定义入口文件路径
baseUrl: "./rjs",
//单入口
//mainConfigFile:"./rjs/main.js",
//name:'main',
//输出路径
//out:'./rjs/dist/build-main.js',
modules: [//要优化的模块
{ name:'main'}//说白了就是各页面的入口文件,相对baseUrl的路径,也是省略后缀“.js”
],
optimize: "uglify",
//相对baseUrl的路径,定义依赖模块的路径
paths: {
a: './js/a',
jquery: './js/jquery',
}
}, function(buildResponse){
// console.log('build response', buildResponse);
cb();
}, cb);//运行 gulp build

main.js


// JavaScript Document
require.config({
baseUrl: "js",
    paths: {
      "jquery":"jquery",
"a":"a"
    }
  });
require(['jquery','a'],function($,a){
$("#btn").on("click",function(){
a();
})
})

html


<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>requireJS</title>
 <script src="require.js" defer async data-main="./main.js" ></script>
</head><body>
<input type="button" value="点击">
</body>
</html>

参考文章
http://www.tuicool.com/articl... r.js
http://www.cnblogs.com/2050/p... gulp
http://m.blog.csdn.net/articl... require.js文件合并

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台