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,  //刪除<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');});