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>
