• requirejs的打包工具r.js


    不建议用命令行,还是用配置文件比较方便--build.js。

    我的build.js文件内容大概如下:

    ( {
        appDir : './',
        baseUrl : './scripts',
        dir : './dist',
        modules : [{
            name : 'main'
        }],
      //忽略的文件--不用管目录结构,只需把需要忽略的文件名写出来就行 fileExclusionRegExp :
    /^(r|build).js|(test.html)$/, optimizeCss : 'standard', removeCombined : true, paths : { jquery : 'jquery-1.10.1.min', config : 'config',     //其他的JS文件 otherjs : 'otherjs' }, shim : { otherjs : { exports : 'otherjs', deps : ['jquery'] } } })

    注意事项:

    1 这里面的paths和shim,其实和main.js中的几乎一样。

    2 如果有在线引用的js文件,那可通过在其对应的值改为'empty:'就行。所以,第1点说的几乎一样,就是除了':empty'不一样之外,其他是一样的。

    比如jquery.js是在线引用的,那就需要写成:jquery:'empty:'。

    【但是,如果其他本地文件引用了jquery,那这时候就会出错了。解决方法就是把所依赖的jquery也放在本地。】

    build.js文件写好之后,就可以开始用命令来打包了。

    cd到当前目录,然后,输入:node r.js -o build.js 【r.js是依赖node的,[npm install requirejs],具体请查看:http://requirejs.org/docs/node.html】

    最后,就会根据build.js配置文件来打包。

    r.js的不好的地方就是打包js和css是分开的。

    下面是打包css文件的方式。

    1 在一个css文件【在上面已经打包好的dist目录下的css文件】的头部,通过@import的方式引入其他需要打包的css文件。比如在main.css文件的头部引入其他文件:

    @import url('css/test1.css');
    @import url('css/test2.css');

    2 在命令行输入:node r.js -o cssIn=dist/styles/main.css out=dist/styles/main.min.css

    这样就会把main.css文件以及@import进来的css文件都打包压缩好。

    3 这时候,还需要手动把多余的文件或文件目录删掉

    这样就大功告成了。

    //==============================================//

    build.js文件详情如下:

    https://github.com/jrburke/r.js/edit/master/build/example.build.js

    中文可参考:

    http://www.cnblogs.com/didi/p/4146656.html

     

    其他相关文章:

    http://stackoverflow.com/questions/23978361/using-gulp-to-build-requirejs-project-gulp-requirejs

     http://www.cnblogs.com/snandy/archive/2012/06/07/2537477.html

    http://www.oschina.net/translate/optimize-requirejs-projects

  • 相关阅读:
    MySQL中的while循环和repeat循环的区别
    Python 基础语法_Python脚本文件结构
    Python 基础语法_Python脚本文件结构
    MySQL存储过程和函数的区别
    第四章 语句和声明
    haproxy 4层和7层负载
    献血是件很赞的事——北漂18年(26)
    JavaScript字符串数值比较问题
    MySQL查看所有可用的字符集
    MySQL获取表格信息
  • 原文地址:https://www.cnblogs.com/simonbaker/p/4409749.html
Copyright © 2020-2023  润新知