gulp基于seaJs模块化项目打包实践【原创】

公司还一直在延续使用jq+seajs的技术栈，因此只能基于如今的技术栈进行静态文件打包，而众所周知seajs的打包比较“偏门”，在查了很多的文档和技术分享后终于琢磨出了本身的打包策略。

本文目录

• 1. devDependencies依赖
• 2. css的压缩、合并、md5
• 3. seajs合并
• 4. js压缩
• 5. html压缩
• 6. 程序的默认执行
• 7. 总结

一：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 合并  压缩  md5
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以下：

// 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 的前置任务。

//  压缩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这边的操做也至为重要。

//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,  //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
        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');
});

七： 总结

经过gulp打包seajs项目，主要的核心仍是在于map映射的问题，因此咱们经过借助绝对路径的方式能够成功的绕开这个问题--将文件合并放在项目以外。

seajs模块化，gulp压缩打包合并只是几个简单的命令已经走了好几个年头，很有些“廉颇老矣”的悲情，可是只要脑筋灵活仍是能作不少事情的，固然咱们也要拥抱变化，webpack都2.0了。。。

gulp打包seajs项目Demo地址 https://github.com/jinghaoo/seaJS-gulp

若是有什么问题，欢迎给我发邮件： jingh1024@163.com