zoukankan      html  css  js  c++  java
  • r.js压缩打包

    AMD模块化开发中的代码压缩打包工具——r.js

    环境搭建基于nodejs;用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的

    javascript部分

    压缩javascript项目开发文件夹

    build.js压缩打包配置文件,文件名可随意

    ({
    	appDir  : './', //基于build,根目录
    	baseUrl : './project', //基于appDir,项目目录
    	dir     : './project.min', //基于build,输出目录
    	locale  : 'en-us', //国际化配置
    	optimize: 'uglify', //压缩方式
    	paths   : {
    		underscore: '../underscore.min',
    		backbone  : '../backbone.min',
    		jquery    : '../jquery.min',
    		...
    	},
    	modules: [
    		{
    			name: 'main' //配置
    		},
    		{
    			name: './controller/init' //控制器
    		},
    		{
    			name: './view/index' //首页
    		},
    		...
    	]
    })

    build.js里baseUrl值最好设置为与main.js里baseUrl值一样的路径,这样paths可以直接复制过来,否则需要重新为每个模块配置相对路径

    modules设置合并压缩模块,配置相对路径时需基于baseUrl

    所有设置的模块(即文件,下同),该模块与其所有依赖模块会被合并压缩;没有设置的模块,该模块会直接压缩,而不会与其依赖模块合并压缩

    r.js提供了以下几种optimize值,即压缩方式

    none:不压缩代码
    uglify:使用UglifyJS,默认
    closure:使用Google's Closure Compiler,简单优化
    closure.keepLines:使用Closure,换行

    模块配置(个人方案,欢迎讨论完善)

    我们的项目分为3大模块,入口配置模块main,控制器模块controller,视图模块view

    main合并压缩了框架、插件及入口配置模块;该文件一旦完成极少改动,保留缓存更佳,设置urlArgs后文件也不会有版本号

    controller合并压缩了公用模块及控制器模块;设置urlArgs后文件有版本号清除缓存

    view合并压缩了模型及视图模块;设置urlArgs后文件有版本号清除缓存

    压缩单个javascript文件

    ({
    	appDir  : './', //基于build,根目录
    	baseUrl : './project', //基于appDir,项目目录
    	name    : './view/index', //基于baseUrl,项目文件
    	out     : './view/index.min', //基于baseUrl,输出文件
    	locale  : 'en-us', //国际化配置
    	optimize: 'uglify', //压缩方式
    	paths   : {
    		underscore: '../underscore.min',
    		backbone  : '../backbone.min',
    		jquery    : '../jquery.min',
    		...
    	}
    })

    开始压缩javascript文件

    命令行进入文件所在文件夹,命令行运行node,找到r.js;直接处理配置文件

    node r.js -o build.js

    没有配置文件,直接压缩javascript文件

    node r.js -o baseUrl=project name=viewindex out=viewindex.min.js optimize=uglify
    

    bat一键压缩打包

    运行需基于bat文件的当前所在目录

    cd ..projectstaticjs
    node r.js -o build.js

    css部分

    开始压缩css文件

    命令行进入文件所在文件夹,命令行运行node,找到r.js;cssIn指向待压缩的文件,out指向压缩后的文件,如压缩后的文件找不到则会自动生成

    node ..js
    .js -o cssIn=index.css out=index.min.css optimizeCss=standard

    相对路径什么的一定要找对,不然会报错

    r.js提供了以下几种optimizeCss值,即压缩方式

    none:不压缩,仅合并
    standard:标准压缩 去换行、空格、注释
    standard.keepLines:除标准压缩外,保留换行
    standard.keepComments:除标准压缩外,保留注释
    standard.keepComments.keepLines:除标准压缩外,保留换行注释
    

    bat一键压缩打包

    注意情况同上

    cd ..projectstaticcss
    node ..js
    .js -o cssIn=index.css  out=index.min.css  optimizeCss=standard
    node ..js
    .js -o cssIn=login.css  out=login.min.css  optimizeCss=standard
    node ..js
    .js -o cssIn=detail.css out=detail.min.css optimizeCss=standard
  • 相关阅读:
    Asp.net弹出浏览器客户端确认对话框代码 Carlwave
    VS 2005 与SQL Server 2005整合优势在哪里?(from csdn.net) Carlwave
    如何让搜索引擎收录我的站点 Carlwave
    超强扩展性的DNNDotNetNuke模块功能分类列表(from 中国DNN) Carlwave
    DotNetNuke命名空间概述 Carlwave
    Most Popular Questions and Answers on ASP.NET Whidbey(from asp.net forums,write by ASP.NET Team) Carlwave
    火箭官方宣告麦蒂缺阵五周 季后赛前景蒙上阴影 Carlwave
    asp.net有效使用缓存(转) Carlwave
    《Business Rules Engine Overview》《业务规则引擎概述》write by Mark Kamoski Carlwave
    中国详细省市县自治区名称列表(含access数据库和sql2000备份数据库) Carlwave
  • 原文地址:https://www.cnblogs.com/frontendBY/p/5301902.html
Copyright © 2011-2022 走看看