R.js Compressed packaging (require + backbone) project development files

Source: Internet
Author: User
Tags closure

Recently the project has stabilized a little, the development file compression packaging problem that has not been paid attention to before has time to solve

Code Compression Packaging Tool--r.js in AMD Modular development

Environment building based on Nodejs; project file compression packaging for AMD modular development is not AMD mode is also possible

JavaScript partial compression JavaScript project Development folder

Build.js Compressed Package configuration file, file name can be arbitrary

{appdir  : './',//build-based, root directory BaseURL: './project ',//based on Appdir, project directory dir     : './project.min ',//build-based, Output directory locale  : ' en-US ',//internationalization configuration optimize: ' uglify ',//Compression paths   : {underscore: '. /underscore.min ', backbone  : '. /backbone.min ', jquery    : '. /jquery.min ',...},modules: [{name: ' main '//config},{name: './controller/init '//Controller},{name: './view/index '//Home},...]})

The BaseURL value in Build.js is preferably set to the same path as the BaseURL value in Main.js, so paths can be copied directly, otherwise the relative path needs to be reconfigured for each module.

Modules set the merge compression module, the relative path should be configured based on BaseURL

All set modules (i.e. files, the same as the same), the module and all of its dependent modules will be merged and compressed; No module is set, the module will be compressed directly without merging with its dependent modules

R.js provides the following optimize values, the compression method
None: Uncompressed code uglify: using UGLIFYJS, default Closure: Using Google's Closure Compiler, simple optimization closure.keeplines: Using Closure, line wrapping

Module configuration (personal program, welcome to discuss the perfect)

Our project is divided into 3 modules, the inlet configuration module Main, controller module controllers, view module views

Main merge compression frame, plug-in and Portal configuration module, once the file has been done very few changes, the retention of the cache is better, set Urlargs after the file will not have a version number

Controller merge and compress the Common module and control module; Set Urlargs after the file has version number clear cache

View merge compresses model and view module; file has version number after setting Urlargs clear cache

Compressing a single JavaScript file
{appdir  : './',//build-based, root directory BaseURL: './project ',//based on Appdir, project directory name    : './view/index ',//based on BaseURL, Project file     out: './view/index.min ',//based on BaseURL, output file locale  : ' en-US ',//internationalized Configuration optimize: ' uglify ',//Compression mode paths   : {underscore: '. /underscore.min ', backbone  : '. /backbone.min ', jquery    : '. /jquery.min ',...}})

Start compressing JavaScript files

The command line enters the folder where the file is located, the command line runs node, finds the r.js; Directly processes the configuration file

Node R.js-o build.js

No configuration files, direct compression of JavaScript files

Node R.js-o baseurl=project name=view\index out=view\index.min.js optimize=uglify

BAT one-click Compression packaging

The current directory where you want to run the bat-based file

Cd.. \project\static\jsnode R.js-o Build.js

CSS Sectionstart compressing CSS files

The command line enters the folder where the file is located, the command line runs node, locate R.js;cssin pointing to the file to be compressed, out points to the compressed file, such as the compressed file will be automatically generated

node.. \js\r.js-o cssin=index.css out=index.min.css Optimizecss=standard

Relative path something must find the right, or it will be an error

R.js provides the following OPTIMIZECSS values, the compression method
None: No compression, only merge standard: normal compression to wrap, space, Note standard.keeplines: Except for standard compression, keep line wrapping standard.keepcomments: Except for standard compression, leave comment standard.keepComments.keepLines: Keep line wrap comments except standard compression

bat One-click Compression packaging

Note the same situation

Cd.. \project\static\cssnode. \js\r.js-o cssin=index.css  out=index.min.css  optimizecss=standardnode. \js\r.js-o cssin=login.css  out=login.min.css  optimizecss=standardnode. \js\r.js-o cssin=detail.css out=detail.min.css Optimizecss=standard

R.js Compressed packaging (require + backbone) project development files

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.