PHP开发工程师@温州。博客关于:技术、生活、读书、互联网。

[require.js工具]使用r.js优化require.js项目

RequireJS提供一个基于node.js的命令行工具r.js用来压缩多个js文件。

 它的主要作用是将多个模块文件压缩合并成一个脚本文件,以减少网页的HTTP请求数。




如何使用?

官方文档:http://www.requirejs.org/docs/optimization.html


这里具体如何使用就不多说了,无非就是用npm下载后几个命令而已。

由于目前端项目大多数都是使用grunt构建的,且r.js也支持grunt。

这里就讲下如何使用grunt配合r.js实现自动化优化require.js项目。


grunt-contrib-requirejs

grunt-contrib-requirejs是grunt官方出的一款用于优化require.js项目的grunt插件,基于r.js。


安装grunt-contrib-requirejs

npm install grunt-contrib-requirejs --save-dev

使用npm install即可完成该插件的安装。

(另外关于如何安装grunt及大概的使用方法可参考本人之前的博客。)


配置grunt-contrib-requirejs

module.exports = function(grunt){
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        requirejs : {
            compile: {
                options: {
                    name : "main",
                    optimize: "uglify",
                    mainConfigFile: "./js/main.js",
                    out: "./compile/all.js"
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-requirejs');
    grunt.registerTask('default',['requirejs']);
}


配置说明:主要配置项在option属性中

optimize代表使用uglify进行压缩。

mainConfigFile代表require.js主模块位置,通过读取主模块里的require.config({})配置来获取各个js的路径。

out代表压缩后的输出位置。

当然不止仅仅这几个配置,详细请看: https://github.com/jrburke/r.js/blob/master/build/example.build.js


运行

配置好后命令行下输入grunt执行任务。

执行完毕后可以看到compile文件夹下多个个all.js,打开可以看到所有通过require.js加载的js文件被压缩成了一行。




额。。。require.js部分暂时告一段落。。









评论 ( 7 )

© yuankeqiang | Powered by LOFTER