html5 模块化打包发布,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//css 合并  压缩  md5gulp.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如下：

// seajs合并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({

map:{

'/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({

map:{

'/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({

map:{

'/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 的前置任务。//  压缩jsgulp.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这边的操作也至为重要。//html 压缩gulp.task('rev',['css','js'],function () {

var options = {

removeComments: true,  //清除HTML注释

collapseWhitespace: true,  //压缩HTML

collapseBooleanAttributes: true,  //省略布尔属性的值 input checked="true" ==> input checked

removeEmptyAttributes: true,  //删除所有空格作属性值 input id=""  ==> input

removeScriptTypeAttributes: true,  //删除

removeStyleLinkTypeAttributes: true,  //删除

minifyJS: true,  //压缩页面JS

minifyCSS: true  //压缩页面CSS

};

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'));    });//清除html文件夹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');});