gulp基於seaJs模組化專案打包實踐

了解gulp的肯定對npm都有所了解，在這裡就不再贅述，直接貼依賴包。

"devdependencies"

:

檔案中使用了gulp的外掛程式「gulp-load-plugins」，沒用過的可以簡單了解下

//css 合併  壓縮  md5
gulp.task('css'
,function
()))
.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
());

好了，下面是重頭戲--合併seajs，在合併seajs之前，我們先了解下一些不同的地方。

由於打包的侷限性我們需要給每乙個被頁面引入的seajs檔案新增乙個中介檔案呼叫seajs.use，不要在頁面中使用seajs.use呼叫。

demo如下：

// seajs合併
gulp.task('seajs'
, ['index/index'
,'index/submit'
,'require/index'
]);gulp.task('index/index'
,function
()/index_main.js"
)    .pipe($.seajscombo(
}))    .pipe(gulp.dest('d:/wamp/www/hxe/temp'
))});
gulp.task('index/submit'
,function
()/submit_main.js"
)    .pipe($.seajscombo(
}))    .pipe(gulp.dest('d:/wamp/www/hxe/temp'
))});
gulp.task('require/index'
,function
()/schedule_main.js"
)        .pipe($.seajscombo(
}))        .pipe(gulp.dest('d:/wamp/www/hxe/temp'
))});

在這裡重點強調一下，由於打包的一些限制，我們需要將js資料夾複製乙份放到乙個絕對路徑資料夾下，我在這放到了d:/wamp/www/hxe/下,而我們產生的合併檔案也一並存放在這個資料夾下。

還需要注意的一點是我們在乙個專案肯定會存在不同的資料夾下有相同的檔名，如我的專案在index和require資料夾下都存在index_main.js和index.js這就需要我們用正則區分，即上面的和。

熟悉gulp的肯定知道我們只有在seajs合併任務完畢後才能執行壓縮任務，所以我們可以將seajs任務作為js的前置任務。

//  壓縮js
gulp.task('js'
, ['seajs'
],function
()//排除混淆關鍵字
})).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
());

在這裡，就需要將我們再絕對路徑下合併產生的臨時檔案壓縮並輸出到我們的專案路徑下。

html的操作，最主要的重頭戲還是在於css和js的路徑替換，所以打包的成功與否html這邊的操作也至為重要。

//html 壓縮
gulp.task('rev'
,['css'
,'js'
],function
() ;
return
gulp.src(['./public/static/dist/rev/*/*.json',])
.pipe($.revcollector(
}))            .pipe($.htmlmin(options))
));});
//清除html資料夾
gulp.task("cleanhtml"
,function
());

程式的預設執行，主要是對gulp打包的順序最後做一遍確認，在控制台直接使用gulp就能觸發default任務。

//預設任務
gulp.task('default'
, ['cleancss'
,'cleanjs'
,'cleanhtml'
],function
());

SeaJS模組化基礎

測試sea.js 檔案 define function require,exports,module exports.b function btn on click function 對外屬性，也可以通過return語句直接返回介面，甚至簡化為define module.exports 檔案 def...

模組化之SeaJS 二

此文來自予舍驛站提供簡單極致的模組化開發體驗非官方文件，整理來自己官方文件的文字與例項，方便速查。別名配置，配置之後可在模組中使用require呼叫require jquery seajs.config define function require,exports,module 設定路徑，...

Gulp 靜態網頁模組化

前言在做純靜態頁面開發的過程中，難免會遇到一些的尷尬問題。比如整套有50個頁面，其中有40個頁面頂部和底部模組相同。那麼同樣的兩段我們複製了40遍最難受的方法然後，這個問題就這樣解決了。再然後，產品經理看了幾遍後突然說頂部的某塊需要改改設計。突然感覺好尷尬心裡是萬馬奔騰然後呢？然後就...

gulp基於seaJs模組化專案打包實踐

SeaJS模組化基礎

模組化之SeaJS 二

Gulp 靜態網頁模組化

相關推薦