gulp+requirejs+less 多应用（模块）业务下的编译构建方案

基于gulp+requirejs+less的多应用构建方案，欢迎star: https://github.com/xiongwilee...

一、Getting Started

适用场景

适用于中小型业务团队中，多项Web应用产品线的前端的资源构建部署。

例如：某电商公司下，包括主站、商家后台、广告后台、招商平台等各类产品线，gulp-requirejs-boilerplate就可以用一条命令实现对static/views等资源进行模块化打包。

特性

1. 基于gulp+requirejs+less的多应用构建支持

2. JavaScript/CSS资源合并压缩

3. 支持HTML中静态资源MD5戳自动替换

4. 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

二、使用方法

任务说明

Usage: gulp [task] --env=[producition|development] --mod=[应用名]Example: gulp build --env=production --mod=exampleTasks:     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']}

三、TODO

1. CSS保存时报错忽略

2. 开发环境模式下也产出了时间戳文件

3. 自动图片精灵处理

关键字：gulp, less, require, requirejs

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！