Multi-application building solution based on gulp+ RequireJS +less

A, Getting Started

Applicable scenario

Suitable for small and medium-sized business teams, a number of Web application product line front-end resource construction and deployment.

For example, gulp-requirejs-boilerplate can package static/views and other resources modularized with one command under an e-commerce company, including the main site, merchant background, advertising background, investment promotion platform and other product lines.

features

  • Multi-application build support based on gulp+ RequireJS +less
  • JavaScript/CSS resource consolidation and compression
  • Supports automatic replacement of MD5 stamps for static resources in HTML
  • HTML static resource combo mode merge

The sample

Download gulP code and compilation tools

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

Go to the sample directory and install (CNPM installation is recommended)

$ cd my-apps && npm install
Copy the code

Compile code: Compile all static resources in production mode

$ gulp build --env=production --mod=example
Copy the code

To see an example, you can use a tool like static-server

$ cd dist && static-server
Copy the code

Then use the browser to access: http://localhost:9080/example/views/index.html

Two, use method

Mission statement

Usage: gulp (task) - env = [producition | development] - mod = [name] Example: gulp build --env=production --mod=example Tasks: Watch Listen mode Start build task build overall build: Clean Clean output directory build:js only build: CSS only build CSS only build:image Only compile image file Build: HTML only compile HTML files build:copy copy resources to dist directory Options: - env current environment variables, optional: production | development, default: development -- mod to compile application name, current requiredCopy the code

Configuration instructions

Global Path Configuration

See gulp/gulp.config.js for details on the configuration module

Path = {app: './', // app code path dist: './dist', // output file path requireConfig: 'the static/js/require. Config. Js' / / reqirejs configuration file path}Copy the code

Application Independent Configuration

In addition you can in your business module build/gulp. Options. Configure independent SRC in js, filter configuration, please refer to: example/build/gulp. Options. Js

// exports. SRC = {copy: ['example/build/*']} // exports.filter = {js: [], css: ['!example/static/css/lib/reset.css'] }Copy the code

Third, TODO

  • CSS saves error ignore
  • Timestamp files are also produced in development environment mode
  • Automatic picture Sprite processing