2016-04-19

RequireJS 模块化加载 与 uglify 文件压缩

关于 RequireJs 它可以用来管理页面中使用的 JS 库之间的依赖关系,同时它也可以让我们以模块化的形式组织 JS 代码。而 uglify 就是将 JS 文件自动化压缩,可以设置混淆变量名,合并 JS 文件等。

requirejs

安装 RequireJS 与 uglify

RequireJS :bower install requirejs
uglify :npm install grunt-contrib-uglify --save-dev

RequireJS 的使用

在适当的位置引用,其中 require.js 是我们通过 Bower 下载下来的 RequireJS,而 data-main 中定义的则是 RequireJS 的配置文件,需要我们手动新建和修改(config.js),在引用时不需要添加.js后缀。

  1. <script type="text/javascript" src="assets/requirejs/require.js" data-main="src/js/config"></script>

RequireJS 的 config 配置文件

  1. require.config({
  2.   //paths 模块声明(不需要添加.js后缀)
  3.   paths: {
  4.     'test' : 'test',  //test 是与 config.js 同级目录下的 test.js 文件
  5.     'jquery': '../../assets/jquery/js/jquery.min'
  6.   },
  7.   shim: {
  8.     //处理一些没有遵守 AMD 规范的 js 库
  9.     'underscore':{
  10.       exports: '_'  //exports值(输出的变量名),表明这个模块外部调用时的名称
  11.     },
  12.     'backbone': {
  13.       deps: ['underscore', 'jquery'], //deps数组,表明该模块的依赖性
  14.       exports: 'backbone'
  15.     }
  16.   }
  17. });
  18.  
  19. //加载相应 JS 文件
  20. require(['test','jquery'],function(t) {
  21.   t.hello();  //执行回调函数
  22. });

test.js 文件中 RequireJs 模块式的写法

  1. define([
  2.   'jquery'  //引用 jQuery
  3.   ], function($) {
  4.   return {
  5.     hello: function(){
  6.       console.log('Hello World');
  7.       $('.container').hide();
  8.     }
  9.   };
  10. });

uglify 文件压缩的使用

通过 Gruntfile.js 配置文件来添加 uglify 文件压缩任务

  1. module.exports = function (grunt) {
  2.   // 项目配置
  3.   grunt.initConfig({
  4.     //压缩文件
  5.     uglify:{
  6.       // 加注释
  7.       options:{
  8.         banner:"/* <%= pkg.name %> <%= pkg.version %>*/ \n"
  9.       },
  10.       buildOne:{
  11.         files:{
  12.           //将 config.js 压缩成 config.min.js
  13.           'dist/js/config.min.js' : 'src/js/config.js'
  14.         }
  15.       },
  16.       buildAll:{
  17.         //将某个文件夹下的所有JS文件按结构压缩到指定的文件夹下
  18.         files:[{
  19.           expand: true,
  20.           cwd:'src/js',   //JS目录下
  21.           src:'**/*.js',  //所有JS文件
  22.           dest:'dist/js'  //压缩到某个目录
  23.         }]
  24.       }
  25.     }
  26.   });
  27.   //加载
  28.   grunt.loadNpmTasks('grunt-contrib-uglify');  //文件压缩
  29.  
  30.   //执行任务
  31.   grunt.registerTask('buOne', ['uglify:buildOne']);  //grunt buOnt
  32.   grunt.registerTask('buAll', ['uglify:buildAll']);  //grunt buAll
  33. };

关于 uglify 的更多使用技巧:请点我