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>
grunt与requirejs结合使用的更多相关文章
- 使用grunt完成requirejs的合并压缩和js文件的版本控制
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...
- Grunt 之 RequireJS
RequireJs 提供了一个打包工具 r.js,可以将相关的模块打包为一个文件.相关说明:http://www.requirejs.org/docs/optimization.html 将相关的脚本 ...
- 前端打包构建工具grunt快速入门(大篇幅完整版)
打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...
- 【grunt整合版】30分钟学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 【grunt第二弹】30分钟学会使用grunt打包前端代码(02)
前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- Grunt 插件使用汇总
最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2 ...
- H5单页面架构:backbone + requirejs + zepto + underscore
首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...
随机推荐
- dubbo-spring
一.需求 某个电商系统,订单服务需要调用用户服务获取某个用户的所有地址:创建两个服务模块进行测试 测试预期结果:订单服务web模块在A服务器,用户服务模块在B服务器,A可以远程调用B的功能. 二.工程 ...
- jQuery选择器之样式
.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的 ...
- react项目构建中的坑—淘宝镜像安装后要设置
基本的搭建步骤参考博客:https://blog.csdn.net/qq_27727251/article/details/86593415 这里要强调的坑是:安装完淘宝镜像要将其设置为默认Regis ...
- 【extjs6学习笔记】0.0 准备
1.下载ExtJS 6 下面是Ext JS 6正式版的GPL版本下载地址 https://www.sencha.com/legal/gpl/ 2.下载sencha cmd 安装完成后,命令行运行出现以 ...
- 中移动TD-LTE 4G设备招标
移动这是要干吗呢?2%的份额,公司如果没有其他业务,可以消失了 ------------------------------------------------------ 中国移动已经初步确定了各供 ...
- 利用基于@AspectJ的AOP实现权限控制
一. AOP与@AspectJ AOP 是 Aspect Oriented Programming 的缩写,意思是面向方面的编程.我们在系统开发中可以提取出很多共性的东西作为一个 Aspect,可以理 ...
- mybatis 部署日志
<!-- 打印查询语句 --> <setting name="logImpl" value="STDOUT_LOGGING" /> &l ...
- OpenGL列主元矩阵和列主序存储
OpenGL矩阵要考虑两个点,一个是向量如何排布,一个是矩阵如何存储和恢复. 1.排布 排布决定了运算的顺序.OpenGL使用的是列主元,它的意思就是一个4X4的矩阵是由4个列向量构成(这里的v1,v ...
- mvc工作总结
MVC的页面跳转方式(放在一般类): filterContext.Result = new RedirectResult("controller/action"); filterC ...
- 如何让浏览器关闭后session失效
llzzcc66 知道合伙人数码行家 推荐于2018-08-10 如果用户不点击网站的“退出”链接,而直接关闭浏览器(或者强制关闭浏览器进程.死机等),服务器无法处理用户退出网站的请求,解决方式如 ...