grunt与requirejs结合使用

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量130 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lanyueff/p/6904397.html
版权 
// 多个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']);
};
View Code

利用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']);
};
View Code

文件结构如下：

备注：

//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>

转载于:https://www.cnblogs.com/lanyueff/p/6904397.html

dengqulun3433
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用grunt合并requireJS的模块文件,压缩css,images
08-11
NULL 博文链接：https://jm1999.iteye.com/blog/2228816
Grunt 之 RequireJS
weixin_33739646的博客
10-21 131
 RequireJs 提供了一个打包工具 r.js，可以将相关的模块打包为一个文件。相关说明：http://www.requirejs.org/docs/optimization.html 将相关的脚本模块整合为单个脚本文件，然后默认使用  UglifyJS 进行紧缩，或者在使用 java 的时候，使用  Closure Compiler 处理。 还可以通过 @import 自动内联相应的...
grunt requireJS 的基础配置
weixin_30252155的博客
10-26 127
module.exports = function(grunt){ //grunt的配置我就不叨叨了 自己看官网就ok了 //我就介绍下grunt的依赖插件grunt-contrib-requirejs //专门打包requeirjs项目的 grunt.initConfig({ //此处的requirejs的配置和requeirjs.config要区分开，那...
Grunt+Requirejs入门
花满楼
11-08 298
首先说项目结构布局 gruntfile.json描述项目使用的grunt组件，申明了命令任务，比如构建编译压缩合并等。 对于npm install 命令，如果出错的话可能需要清除再行install或者npm update.使用npm list列举本地缺失或错误的包，进入相应文件夹进行单独构建npm install [code="js"]module.exports = function (g...
关于requirejs和grunt压缩合并是否矛盾
timeless的博客
03-01 1629
requirejs主要是为了模块化开发，这样带来的好处不言而喻。但是分成多个js文件增加了请求数，那么就要用到合并压缩。合并压缩了原来的许多独立的js模块，那requirejs又是怎么冲压缩的文件中找到各个独立的模块进行加载的呢，感觉两者有点冲突，这个问题想了很久也假想了很多可能。在知乎上找到了一个回答，好像有那么点意思。 这个问题设计到多个概念词汇： 1：模块化开发；模块化开发无
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
12-01
最近有一个项目使用了 requirejs 来...我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能，这个就是根据 r.js 封装的 grunt 插件。 安装 grunt-contrib-requirejs npm i --save-dev grunt-con
grunt-requirejs-revs:修改requirejs引用的文件
05-12
grunt-requirejs-revs 修改requirejs引用的文件 入门 这个插件需要~0.4.5 如果您以前从未使用过 ，请务必查看《指南》，因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后，可以使用以下命令安装此插件...
grunt-requirejs-injector:在定义上注入 RequireJS 依赖
06-04
熟悉该过程后，您可以使用以下命令安装此插件： npm install grunt-requirejs-injector --save-dev 安装插件后，可以使用以下 JavaScript 代码在 Gruntfile 中启用它： grunt . loadNpmTasks ( 'grunt-requirejs-...
grunt-typescript-requirejs-boilerplate:Grunt TypeScript RequireJS样板
05-08
Grunt TypeScript RequireJS样板jQuery示例中显示的依赖项的使用。 依赖关系由Bower管理。 结果文件将被缩小并与源映射链接。建造安装节点模块： npm install 下载Bower依赖项： bower update 运行Grunt构建过程： ...
Grunt、Gulp区别 webpack、 requirejs区别
dibengshao7358的博客
08-28 397
1. 书写方式 grunt运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。gulp是用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watchgul...
简单的前端开发环境搭建，举例Grunt Bower、Requirejs 和Angular
lensgcx的博客
01-06 1836
目前要搭建一个简单的前端开放环境，由于各个公司各个业务的不同，选取的框架都不一样，环境搭建要依据实际情况来操作。 目前网上关于搭建一个前端环境的方法很多，我这里总结合并，并根据自己的实际搭建情况简单介绍一下。
grunt-contrib-requirejs插件合并压缩requirejs管理的Angularjs应用
timeless的博客
03-01 1748
Fruntfile.js 'use strict'   module.exports = function(grunt) {     // 配置     grunt.initConfig({         pkg : grunt.file.readJSON('package.json'),         requirejs : {             build : {  
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 863
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 117
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 911
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 976
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 376
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 305
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
使用 grunt 对res目录下的png图片进行压缩
05-24
好的，你可以尝试使用grunt-contrib-imagemin插件来实现这个需求，具体操作步骤如下： 1. 在项目中安装grunt和grunt-contrib-imagemin插件： ``` npm install grunt grunt-contrib-imagemin --save-dev ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值