gulp基于seaJs模块化项目打包实践
一：devDependencies依赖
了解gulp的肯定对npm都有所了解，在这里就不再赘述，直接贴依赖包。
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean": "^0.3.2",
"gulp-cleanhtml": "^1.0.1",
"gulp-cssimport": "^5.0.0",
"gulp-cssmin": "^0.1.7",
"gulp-htmlmin": "^3.0.0",
"gulp-load-plugins": "^1.5.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.1.1",
"gulp-seajs-combo": "^1.2.3",
"gulp-uglify": "^2.1.0"
二： css的压缩、合并、md5
文件中使用了gulp的插件“gulp-load-plugins”，没用过的可以简单了解下 https://www.npmjs.com/package/gulp-load-plugins
gulp.task('css', function(){
return gulp.src('./public/static/src/css/!(common|lib)/*.css')
.pipe($.cssimport({}))
.pipe($.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe($.cssmin())
.pipe($.rev())
.pipe(gulp.dest('./public/static/dist/css'))
.pipe($.rev.manifest())
.pipe($.rename('css-mainfest.json'))
.pipe(gulp.dest('./public/static/dist/rev/css'));
考虑到每次修改需要把以前的css文件删除，所以还要有清除css文件的任务
gulp.task("cleancss", function(){
return gulp.src('./public/static/dist/css')
.pipe($.clean());
三： seajs合并
好了，下面是重头戏--合并seajs，在合并seajs之前，我们先了解下一些不同的地方。
由于打包的局限性我们需要给每一个被页面引入的seajs文件添加一个中介文件调用seajs.use，不要在页面中使用seajs.use调用。
Demo如下：
gulp.task('seajs', ['index/index', 'index/submit','require/index']);
gulp.task('index/index', function(){
return gulp.src("./public/static/src/js/{index,}/index_main.js")
.pipe($.seajsCombo({
'/static/src/js/index/index.js': 'D:/wamp/www/hxe/js/index/index.js'
.pipe(gulp.dest('D:/wamp/www/hxe/temp'))
gulp.task('index/submit', function(){
return gulp.src("./public/static/src/js/{index,}/submit_main.js")
.pipe($.seajsCombo({
'/static/src/js/index/submit.js': 'D:/wamp/www/hxe/js/index/submit.js'
.pipe(gulp.dest('D:/wamp/www/hxe/temp'))
gulp.task('require/index', function(){
return gulp.src("./public/static/src/js/{require,}/schedule_main.js")
.pipe($.seajsCombo({
'/static/src/js/require/index.js': 'D:/wamp/www/hxe/js/require/index.js'
.pipe(gulp.dest('D:/wamp/www/hxe/temp'))
在这里重点强调一下，由于打包的一些限制，我们需要将js文件夹复制一份放到一个绝对路径文件夹下，我在这放到了 D:/wamp/www/hxe/ 下,而我们产生的合并文件也一并存放在这个文件夹下。
还需要注意的一点是我们在一个项目肯定会存在不同的文件夹下有相同的文件名，如我的项目在index和require文件夹下都存在index_main.js和index.js这就需要我们用正则区分，即上面的{index,} 和 {require,}。
四： js压缩
熟悉gulp的肯定知道我们只有在seajs合并任务完毕后才能执行压缩任务，所以我们可以将seajs任务作为 js 的前置任务。
gulp.task('js', ['seajs'], function(){
return gulp.src("D:/wamp/www/hxe/temp/*/*.js")
.pipe($.uglify({
mangle: { except: ['require', 'exports', 'module', '$'] }
.pipe($.rev())
.pipe(gulp.dest('./public/static/dist/js'))
.pipe($.rev.manifest())
.pipe($.rename('js-manifest.json'))
.pipe(gulp.dest('./public/static/dist/rev/js'))
gulp.task("cleanJs", function(){
return gulp.src('./public/static/dist/js')
.pipe($.clean());
在这里，就需要将我们再绝对路径下合并产生的临时文件压缩并输出到我们的项目路径下。
五： html压缩
html的操作，最主要的重头戏还是在于css和js的路径替换，所以打包的成功与否html这边的操作也至为重要。
gulp.task('rev',['css','js'],function () {
var options = {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
return gulp.src(['./public/static/dist/rev/*/*.json', './application/home/view/**/*.html'])
.pipe($.revCollector({
replaceReved: true,
dirReplacements: {
'/src/css': '/dist/css/',
'/src/js/': '/dist/js/'
.pipe($.htmlmin(options))
.pipe(gulp.dest('./application/home/view_build'));
gulp.task("cleanhtml", function(){
return gulp.src('./application/home/view_build')
.pipe($.clean());
六： 程序的默认执行
程序的默认执行，主要是对gulp打包的顺序最后做一遍确认，在控制台直接使用gulp就能触发default任务。
gulp.task('default', ['cleancss','cleanJs', 'cleanhtml'], function(){
gulp.start('rev');
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
用requirejs模块化开发，想把js合并下，用 的r.js，项目用gulp构建的，感觉操作起来有点儿复杂，需要先用r.js打包，然后再gulp构建项目，试了下amd-optimize，没有成功，想各位大神指引一下
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
正好我也在这么用require,也是四处搜罗测试，可能面临如下几个问题：1、加载：requirejs一次性加载了所有的js文件（说好的按需加载呢？）2、缓存：怎么给文件加md5或hash防止缓存3、合并：可能一次要加载N个模块js文件，这不合理啊，所以想要压缩（分类压缩成好几个文件）4、构建：用gulp自动给压缩合并后的js文件加上md5防止缓存－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－鉴于以上，我也在摸索阶段，望有高手多多赐教。
1、关于加载多问题，
经我测试：
require(['component/ab'], function(ab) {
//这里调用ab里的b函数
以上并未调用 a 函数 在实际加载页面中 d.js 也被加载了，同时 d 所依赖的 a 也同时加载进来了，我们所期望的是，只有被调用的时候才加载，并未实现……
define(function(require) {
a: function() {
var d = require('component/d');
console.log("ab.a()");
b: function() {
var b = require('component/b');
console.log("ab.b()");
define(function(require) {
d: function() {
var a = require('component/a');
define(function() {
a: function() {
console.log("aaaaaaaaaaaaa");
－－－－－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－－－
2、关于用gulp给文件加md5防止缓存的方法需要
"gulp-rev","gulp-rev-collector",这个两个文件配合即可
3、文件合并requie有 r.js 文件来合并，也可以区分多个文件及排除不合并的文件如果用gulp 就用 amd-optimize
gulp.task('rjs', function() {
return gulp.src('src/js/**/*.js')
.pipe(amdOptimize("./src/js/app", {
//require config
'jquery': 'src/js/lib/jquery',
'laydate': 'src/js/lib/laydate',
'laydate': {
exports: 'laydate'
.pipe($.concat("app.js")) //合并
.pipe(gulp.dest("app/dist")) //输出保存
.pipe($.rename("app.min.js")) //重命名
.pipe($.uglify()) //压缩
.pipe(gulp.dest("app/dist")) //输出保存
重要的是自己做个小demo实践一下。就会明白。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。16:01 提问
gulp对整个工程中的js进行打包，require文件总是报错
比如有如下结构
------index.js
------show.js
------task_chart.js
其中show.js里面代码如下：
var say = require('./task_chart');
say.hello();
showRequired.js代码如下
function hello(){
alert('hello')
module.exports.hello =
gulpfile.js如下：
gulp.task( 'browserify', function() {
return gulp.src( [ 'project/**/*.js' ] )
.pipe( browserify( {
.pipe( gulp.dest( './WebContent/public/js/' ) )
但是运行gulp的时候会出错，如下：
events.js:141
// Unhandled 'error' event
Error: module "./task_chart" not found from "D:\work\projectName\WebContent\project\co.........................
但是单独压缩show这个文件夹确是可以的
gulp.task( 'browserify', function() {
return gulp.src( [ 'project/show/*.js' ] )
.pipe( browserify( {
.pipe( gulp.dest( './WebContent/public/js/' ) )
这个是什么原因
按赞数排序
module.exports 不是gulp的吧
还用了什么
webpack？？
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐require JS入门 及 打包
require Js 入门
代码库结构示例：
其中部分文件代码及作用解析如下：
index.html：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&script data-main="js/main.js" src="js/require.js"&&/script&
&p&hi~&/p&
js/main.js:
js入口文件，其中设置基本参数，调用函数。
require.config({
baseUrl: 'js',
/*相对于根路径的绝对路径，与main.js本身的位置没有关系*/
jquery: 'jquery/jquery-1.11.1',
/*不用加后缀.js*/
aaa: 'jquery/jquery-aaa',
values: 'other_js/values',
tourl: 'other_js/tourl'
// Start the main logic.
require(['jquery', 'aaa', 'values', 'tourl'], function ($, a, v, t) {
$(document).ready(function () {
/*注释后一样执行，因为引用的时候相当于调用了。*/
a.al();/*若想手动调用其中函数，可以设置返回值，然后手动调用*/
js/other_js/tourl.js:
define(["require"], function(require) {
return alert(require.toUrl("./style.css"));
js/jquery/jquery.aaa.js:define (function () {
al: function() {alert('kk');}
执行index.html代码后，结果如图：
第一次弹框：
第二次弹框：
require Js 利用r.js打包 （以下经验借鉴自他人博客）
首先下载r,js，然后保证需要打包以及涉及到的文件处于同一目录下。
代码库结构示例：
其中部分文件代码如下：
index.html
Require r.js打包合并JS模块
r.js 打包压缩文件（依赖require）
requirejs原理深究以及r.js和gulp的打包
RequireJS对文件合并与压缩实现方法
使用gulp自动优化requireJS项目
requireJS简单入门学习
RequireJS的入门，基础用法
用 Browserify 替换 require.js
Webpack-源码一，使用require加载并打包模块
seajs和requiejs的区别，和用gulp打包方法
没有更多推荐了，seajs和requiejs的区别，和用gulp打包方法_百度知道
seajs和requiejs的区别，和用gulp打包方法
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
IT类认证行家
采纳数：3924
获赞数：17318
从demo.html 引入一个入口c.js，
c.js require-b.js
b.js require - a.js代码如下：c module[html] view plain copy print?define(function(require, exports, module) {
console.log(&hello module c&);
require('b');
console.log(&c finished&);
b module[html] view plain copy print?define(function(require, exports, module) {
console.log(&hello module b&)
var a = require('a');
console.log(&b finished&)
a module[html] view plain copy print?define(function() {
console.log(&hello module a&)
requriejs 的 html代码：[html] view plain copy print?&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&seajs和requirejs的区别&/title&
&script src=&require.min.js& data-main=&c.js&&&/script&
执行结果：ello module aa.js:2hello module bb.js:2b finishedb.js:4hello module cc.js:3c finishedc.js:7seajs的html代码：[html] view plain copy print?&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&seajs和requirejs的区别&/title&
&script src=&sea.2.3.js&&&/script&
seajs.use('./c');
执行结果：hello module cc.js:3hello module bb.js:2hello module aa.js:2b finishedb.js:4c finishedc.js:7所以总结：seajs是从上到下执行，requriejs是把其中require的js全部加载完了，再往下执行。· 2、依赖的加载有所不同在define中 requriejs加载了依赖就执行；而seajs在define中只是加载不会执行（如果要执行，需要用require()方法）案例代码：c.js模块[html] view plain copy print?define(['b'],function(require,exports,module){
console.log(&hello module c&);
console.log(&c finished&);
b.js模块[html] view plain copy print?define(['a'],function(require,exports,module) {
console.log(&hello module b&)
console.log(&b finished&)
a.js模块[html] view plain copy print?define(['b'],function(require,exports,module) {
console.log(&hello module a&)
seajs和requirejs的 html代码 和 1 中一样执行结果：seajs执行结果：hello module cc.js:2c finishedc.js:4requiresj的执行结果：ello module aa.js:2hello module bb.js:2b finishedb.js:4hello module cc.js:2c finishedc.js:4总结：
在define书写中A：requirejs 加载了就执行，所以requirejs是预执行（在define中预先执行所有require依赖的js），RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会&停顿&1次, 完成整个过程是会比SeaJS要快. 预执行
B：seajs只是纯粹的加载依赖的文件，不执行就连console都不执行就是纯粹的“加载”，SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析, 这里耗费了时间, 因为这个特例中的模块巨大, 因此造成&停顿&2次的现象, 这就是我所说的SeaJS中的&懒执行&.在2的基础上 c.js代码为[html] view plain copy print?define(function(require,exports,module){
require('b');
require('a');
console.log(&hello module c&);
console.log(&c finished&);
执行结果都是一样hello module bb.js:2b finishedb.js:4hello module aa.js:2hello module cc.js:4c finishedc.js:63、取别名时requirejs默认舍掉.js的后缀
4、 打包方法gulp 打包seajs requirejs 打包
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}