迴歸天然：gulp+requirejs+less 多應用（模塊）業務下的編譯構建方案

gulp+requirejs+less 多應用（模塊）業務下的編譯構建方案

基於gulp+requirejs+less的多應用構建方案，歡迎star: https://github.com/xiongwilee...

1、Getting Started

適用場景

適用於中小型業務團隊中，多項Web應用產品線的前端的資源構建部署。

例如：某電商公司下，包括主站、商家後臺、廣告後臺、招商平臺等各種產品線，gulp-requirejs-boilerplate就能夠用一條命令實現對static/views等資源進行模塊化打包。

特性

• 基於gulp+requirejs+less的多應用構建支持

• JavaScript/CSS資源合併壓縮

• 支持HTML中靜態資源MD5戳自動替換

• HTML中靜態資源combo模式合併

示例

下載gulp代碼及編譯工具

$ git clone https://github.com/xiongwilee/gulp-requirejs-boilerplate.git my-apps

進入示例目錄並安裝（推薦使用cnpm安裝）

$ cd my-apps && npm install

編譯代碼：用生產環境模式編譯全部靜態資源

$ gulp build --env=production --mod=example

查看示例，能夠使用static-server之類的工具

$ cd dist && static-server

而後用瀏覽器訪問： http://localhost:9080/example/views/index.html

2、使用方法

任務說明

Usage: gulp [task] --env=[producition|development] --mod=[應用名]

Example: gulp build --env=production --mod=example

Tasks: 
    watch                               監聽模式啓動build任務
    build                               總體編譯
    build:clean                         清空產出目錄

    build:js                            僅僅編譯js文件
    build:css                           僅僅編譯css文件
    build:image                         僅僅編譯image文件
    build:html                          僅僅編譯html文件
    build:copy                          拷貝資源到dist目錄

Options:
    --env                               當前的環境變量，可選：production|development,默認:development
    --mod                               當前要編譯的應用名稱，必填

配置說明

全局path配置

詳細配置模塊請參看：gulp/gulp.config.js

exports.path = {
  app: './',                                    // 應用業務代碼路徑
  dist: './dist',                               // 產出文件路徑
  requireConfig: 'static/js/require.config.js'  // reqirejs配置文件路徑
}

應用獨立配置

另外你能夠在你的業務模塊的build/gulp.options.js中自行配置獨立的src,filter配置，請參考：example/build/gulp.options.js

/**
 * 業務模塊gulp獨立配置文件
 */

// 須要操做的文件
exports.src = {
  copy: ['example/build/*']
}

// 不須要編譯的文件
exports.filter = {
  js: [],
  css: ['!example/static/css/lib/reset.css']
}

3、TODO

• CSS保存時報錯忽略

• 開發環境模式下也產出了時間戳文件

• 自動圖片精靈處理