grunt与requirejs结合使用

// 多个js压缩成一个js
  // Project configuration.
module.exports = function(grunt) {
    // 使用严格模式
    'use strict';

    // 这里定义我们需要的任务
    grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
           requirejs : {
            build : {
                options : {
                    baseUrl : './',
                    name:'./js/config/main',    //主文件名字
                    optimize:'uglify',   //指定压缩工具类型  使用uglify工具压缩
                    mainConfigFile: './js/config/config.js',  //require 的主文件
                    out:'./assets/js/<%= pkg.name %>2.min.js'       //压缩后的文件
                    //其他无需指定  本插件会自动寻找require引进的所有文件
                }
            }
        },
          concat : {
            css : {
                src : ['dist/css/*.css'],
                dest : 'dist/css/<%= pkg.name %>.css'
            }
        }, 
     cssmin: {  
         options: {  
             keepSpecialComments: 0  
         },  
         compress: {  
           files: {
            'assets/css/<%= pkg.name %>.min.css': ['dist/css/<%= pkg.name %>.css']
          }
      }  
     }, 
        // 设置任务，删除文件夹
    clean: {
        dist: 'dist'
    },

    // 通过sass编译成css文件
    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: 'scss',
                src: ['*.scss'],
                dest: 'dist/css',
                ext: '.css'
            }]
        }
    },
         // 检测改变，自动跑sass任务
    watch: {
        scripts: {
            files: ['scss/*.scss','js/*.js','js/*/*.js','assets/css/*.css'],
            tasks: ['sass','concat','cssmin'],
            options: {
                spawn: false
            }
        }
    }


    });
    grunt.loadNpmTasks('grunt-contrib-requirejs');
      grunt.loadNpmTasks('grunt-contrib-concat'); 
      grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 一定要引用着3个模块
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist，然后重新编译，最后监测文件夹的情况。
    grunt.registerTask('default', ['clean:dist', 'sass:dist','requirejs','concat', 'cssmin', 'watch']);
};

利用requirejs在当前页面调用JS加载并执行

<script data-main="./js/news.js"   defer="" async="true" src="./lib/js/require.js"></script>

问题1:1.模块压缩后无法加载。 就是require的参数 ，被替换成随机参数，冲突  

　　解决：应该定义子模块：eg：定义一个util模块

define(function () {
    var util = {
        con:function(){
            alert(ff);
        }
    };

    util.browserTips();
    return util;
});

配置公共模块：

define(function () {
    require.config({
        paths: {
            'jquery': 'http://wap.bdline.com/lib/js/jquery-1.7.2.min',
            'swiper': 'http://wap.bdline.com/lib/js/swiper2.min',
            'util': 'http://wap.bdline.com/js/util' //将定义的util模块作为公共模块
        },
        shim: {
            'util': ['jquery']
        }
    });
});

调用公共模块

require(['http://wap.bdline.com/js/config/config.js'], function () {
    require(['jquery','swiper','util'], function ($, swiper, util) {
        //此处写执行代码
        alert(util);
          
    });
});    

2.如何做到每个页面按需加载模块，并将当前页面用到的模块，压缩到同一个文件夹里。 又要避免重复加载问题。

-----------------------------

grunt配置文件如下：

// 多个js压缩成一个js
  // Project configuration.
module.exports = function(grunt) {
    // 使用严格模式
    'use strict';

    // 这里定义我们需要的任务
    grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
           requirejs : {
            build : {
                options : {
                    baseUrl : './',
                    name:'./js/config/main',    //主文件名字
                    optimize:'uglify',   //指定压缩工具类型  使用uglify工具压缩
                    mainConfigFile: './js/config/config.js',  //require 的主文件
                    out:'./assets/js/<%= pkg.name %>2.min.js'       //压缩后的文件
                    //其他无需指定  本插件会自动寻找require引进的所有文件
                }
            }
        },
         uglify: {  
         options: {  
         },  
         dist: {  
             files: {  
                 'dist/js/index.js': ["js/index.js"],
                 'dist/js/about.js': ["js/about.js"],
                 'dist/js/news.js': ["js/news.js"],
                 'dist/js/help.js': ["js/help.js"]
             }  
         }  
     }, 
          concat : {
            css : {
                src : ['./lib/bootstrap/css/bootstrap.min.css','./lib/css/common.css','./lib/css/swiper2.css','dist/css/*.css'],
                dest : 'dist/css/<%= pkg.name %>.css'
            }
        }, 
     cssmin: {  
         options: {  
             keepSpecialComments: 0  
         },  
         compress: {  
           files: {
            'assets/css/<%= pkg.name %>.min.css': ['dist/css/<%= pkg.name %>.css']
          }
      }  
     }, 
        // 设置任务，删除文件夹
    clean: {
        dist: 'dist'
    },

    // 通过sass编译成css文件
    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: 'scss',
                src: ['*.scss'],
                dest: 'dist/css',
                ext: '.css'
            }]
        }
    },
         // 检测改变，自动跑sass任务
    watch: {
        scripts: {
            files: ['./js/*.js','./dist/js/*.js','./assets/js/*.js'],
            tasks: ['uglify'],
            options: {
                spawn: false
            }
        },
        csss: {
            files: ['./lib/css/*.css','./dist/css/*.css','./assets/css/*.css'],
            tasks: ['concat','cssmin'],
            options: {
                spawn: false
            }
        },
        sass: {
            files: ['scss/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false
            }
        },
        require: {
            files: ['./js/config/*.js'],
            tasks: ['requirejs'],
            options: {
                spawn: false
            }
        }
    }


    });
    grunt.loadNpmTasks('grunt-contrib-requirejs');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');  
      grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 一定要引用着3个模块
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist，然后重新编译，最后监测文件夹的情况。
    grunt.registerTask('default', ['clean:dist', 'sass:dist','uglify','requirejs','concat', 'cssmin', 'watch']);
};

文件结构如下：

备注：

//grunt+requirejs
js: 此为原文件js（本地写代码时，文件引用此处代码，便于调试）
dist/css:由sass转化之后的样式，（本地测试用。css:dist/css 为scss生成的，压缩为assets/css）
dist/js:压缩之后的文件（上线时调用）
assets/js为压缩后的js（仅为首页js,上线时调用）
assets/css/linkongfront.min.css 全部css按顺序压缩之后。上线样式只调用这一个便可。这个文件不会自动更改 。需要手动grunt一下
lib:是一些模块和库

注意：
首页js是 js/config/main 压缩成的 ./assets/js/linkongfront.min.js
上线时：assets,dist/js,images,lib,html即可

大体思路：库每个页面按需引入

上线时替换成：<link href="./assets/css/linkongfront.min.css" rel="stylesheet">
<script type="text/javascript" src='./assets/js/linkongfront.min.js'></script>

测试js:
<script type="text/javascript" charset="utf-8" src="./lib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./lib/js/swiper2.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="./lib/js/fastclick.js"></script>
<script type="text/javascript" charset="utf-8" src="./testjs/util.js"></script>
<script type="text/javascript" charset="utf-8" src="./testjs/index.js"></script>