`
Hello______world
  • 浏览: 17753 次
社区版块
存档分类
最新评论

css-builder.js

    博客分类:
  • js
阅读更多
define(['require', './normalize'], function(req, normalize) {
  var cssAPI = {};

  var isWindows = !!process.platform.match(/^win/);

  function compress(css) {
    if (config.optimizeCss == 'none') {
      return css;
    }
    
    if (typeof process !== "undefined" && process.versions && !!process.versions.node && require.nodeRequire) {
      try {
        var csso = require.nodeRequire('csso');
      }
      catch(e) {
        console.log('Compression module not installed. Use "npm install csso -g" to enable.');
        return css;
      }
      var csslen = css.length;
      try {
        css =  csso.justDoIt(css);
      }
      catch(e) {
        console.log('Compression failed due to a CSS syntax error.');
        return css;
      }
      console.log('Compressed CSS output to ' + Math.round(css.length / csslen * 100) + '%.');
      return css;
    }
    console.log('Compression not supported outside of nodejs environments.');
    return css;
  }

  //load file code - stolen from text plugin
  function loadFile(path) {
    if (typeof process !== "undefined" && process.versions && !!process.versions.node && require.nodeRequire) {
      var fs = require.nodeRequire('fs');
      var file = fs.readFileSync(path, 'utf8');
      if (file.indexOf('\uFEFF') === 0)
        return file.substring(1);
      return file;
    }
    else {
      var file = new java.io.File(path),
        lineSeparator = java.lang.System.getProperty("line.separator"),
        input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), 'utf-8')),
        stringBuffer, line;
      try {
        stringBuffer = new java.lang.StringBuffer();
        line = input.readLine();
        if (line && line.length() && line.charAt(0) === 0xfeff)
          line = line.substring(1);
        stringBuffer.append(line);
        while ((line = input.readLine()) !== null) {
          stringBuffer.append(lineSeparator).append(line);
        }
        return String(stringBuffer.toString());
      }
      finally {
        input.close();
      }
    }
  }


  function saveFile(path, data) {
    if (typeof process !== "undefined" && process.versions && !!process.versions.node && require.nodeRequire) {
      var fs = require.nodeRequire('fs');
      fs.writeFileSync(path, data, 'utf8');
    }
    else {
      var content = new java.lang.String(data);
      var output = new java.io.BufferedWriter(new java.io.OutputStreamWriter(new java.io.FileOutputStream(path), 'utf-8'));

      try {
        output.write(content, 0, content.length());
        output.flush();
      }
      finally {
        output.close();
      }
    }
  }

  //when adding to the link buffer, paths are normalised to the baseUrl
  //when removing from the link buffer, paths are normalised to the output file path
  function escape(content) {
    return content.replace(/(["'\\])/g, '\\$1')
      .replace(/[\f]/g, "\\f")
      .replace(/[\b]/g, "\\b")
      .replace(/[\n]/g, "\\n")
      .replace(/[\t]/g, "\\t")
      .replace(/[\r]/g, "\\r");
  }

  // NB add @media query support for media imports
  var importRegEx = /@import\s*(url)?\s*(('([^']*)'|"([^"]*)")|\(('([^']*)'|"([^"]*)"|([^\)]*))\))\s*;?/g;
  var absUrlRegEx = /^([^\:\/]+:\/)?\//;
  
  // Write Css module definition
  var writeCSSDefinition = "define('@writecss', function() {return function writeCss(c) {var d=document,a='appendChild',i='styleSheet',s=d.createElement('style');s.type='text/css';d.getElementsByTagName('head')[0][a](s);s[i]?s[i].cssText=c:s[a](d.createTextNode(c));};});";

  var siteRoot;

  var baseParts = req.toUrl('base_url').split('/');
  baseParts[baseParts.length - 1] = '';
  var baseUrl = baseParts.join('/');

  var curModule = 0;
  var config;

  var writeCSSForLayer = true;
  var layerBuffer = [];
  var cssBuffer = {};

  cssAPI.load = function(name, req, load, _config) {
    //store config
    config = config || _config;

    if (!siteRoot) {
      siteRoot = path.resolve(config.dir || path.dirname(config.out), config.siteRoot || '.') + '/';
      if (isWindows)
        siteRoot = siteRoot.replace(/\\/g, '/');
    }

    //external URLS don't get added (just like JS requires)
    if (name.match(absUrlRegEx))
      return load();

    var fileUrl = req.toUrl(name + '.css');
    if (isWindows)
      fileUrl = fileUrl.replace(/\\/g, '/');

    // rebase to the output directory if based on the source directory;
    // baseUrl points always to the output directory, fileUrl only if
    // it is not prefixed by a computed path (relative too)
    var fileSiteUrl = fileUrl;
    if (fileSiteUrl.indexOf(baseUrl) < 0) {
      var appRoot = req.toUrl(config.appDir);
      if (isWindows)
        appRoot = appRoot.replace(/\\/g, '/');
      if (fileSiteUrl.indexOf(appRoot) == 0)
        fileSiteUrl = siteRoot + fileSiteUrl.substring(appRoot.length);
    }

    //add to the buffer
    cssBuffer[name] = normalize(loadFile(fileUrl), fileSiteUrl, siteRoot);

    load();
  }

  cssAPI.normalize = function(name, normalize) {
    if (name.substr(name.length - 4, 4) == '.css')
      name = name.substr(0, name.length - 4);
    return normalize(name);
  }

  cssAPI.write = function(pluginName, moduleName, write, parse) {
    var cssModule;
    
    //external URLS don't get added (just like JS requires)
    if (moduleName.match(absUrlRegEx))
      return;

    layerBuffer.push(cssBuffer[moduleName]);
    
    if (!global._requirejsCssData) {
      global._requirejsCssData = {
        usedBy: {css: true},
        css: ''
      }
    } else {
      global._requirejsCssData.usedBy.css = true;
    }

    if (config.buildCSS != false) {
      var style = cssBuffer[moduleName];

      if (config.writeCSSModule && style) {
 	    if (writeCSSForLayer) {
    	  writeCSSForLayer = false;
          write(writeCSSDefinition);
        }

        cssModule = 'define(["@writecss"], function(writeCss){\n writeCss("'+ escape(compress(style)) +'");\n})';
      }
      else {
		cssModule = 'define(function(){})';
      }

      write.asModule(pluginName + '!' + moduleName, cssModule);
    }
  }

  cssAPI.onLayerEnd = function(write, data) {
    if (config.separateCSS && config.IESelectorLimit)
      throw 'RequireCSS: separateCSS option is not compatible with ensuring the IE selector limit';

    if (config.separateCSS) {
      var outPath = data.path.replace(/(\.js)?$/, '.css');
      console.log('Writing CSS! file: ' + outPath + '\n');

      var css = layerBuffer.join('');

      process.nextTick(function() {
        if (global._requirejsCssData) {
          css = global._requirejsCssData.css = css + global._requirejsCssData.css;
          delete global._requirejsCssData.usedBy.css;
          if (Object.keys(global._requirejsCssData.usedBy).length === 0) {
            delete global._requirejsCssData;
          }
        }
        
        saveFile(outPath, compress(css));
      });

    }
    else if (config.buildCSS != false && config.writeCSSModule != true) {
      var styles = config.IESelectorLimit ? layerBuffer : [layerBuffer.join('')];
      for (var i = 0; i < styles.length; i++) {
        if (styles[i] == '')
          return;
        write(
          "(function(c){var d=document,a='appendChild',i='styleSheet',s=d.createElement('style');s.type='text/css';d.getElementsByTagName('head')[0][a](s);s[i]?s[i].cssText=c:s[a](d.createTextNode(c));})\n"
          + "('" + escape(compress(styles[i])) + "');\n"
        );
      }
    }
    //clear layer buffer for next layer
    layerBuffer = [];
    writeCSSForLayer = true;
  }

  return cssAPI;
});
分享到:
评论

相关推荐

    electron 使用 electron-builder 打包所需工具 winCodeSign-2.6.0.zip

    在电子开发领域,`Electron` 是一个非常流行的框架,它允许开发者使用 JavaScript、HTML 和 CSS 来构建跨平台的桌面应用程序。`Electron Builder` 是一个完整的解决方案,用于构建、打包和发布 Electron 应用程序,...

    nsis-3.0.1.4.7z文件.zip

    Electron是一个开放源代码框架,允许开发者使用JavaScript、HTML和CSS来构建跨平台的桌面应用程序。当开发者使用Electron完成应用程序开发后,通常会想要将这些应用程序打包成可执行文件(.exe),以便在Windows平台...

    nsis-3.0.4.1

    Electron是一个开源框架,允许开发者使用JavaScript、HTML和CSS来构建跨平台的桌面应用程序。它结合了Chromium和Node.js,使得Web开发者可以利用已有的技能栈开发原生应用。然而,当使用NSIS来打包Electron应用时,...

    前端开源库-swint-builder-css.zip

    "Swint-Builder-CSS" 是一个专门为前端开发者设计的开源构建工具,它专注于CSS的构建流程,旨在简化和优化CSS开发过程中的编译、压缩、合并等任务。这个库可以帮助开发者更高效地管理和维护他们的样式表,提高前端...

    css-selector-httpbuilder-源码.rar

    在JavaScript中,`querySelector`和`querySelectorAll`方法就是基于CSS选择器来选取DOM元素的。理解CSS选择器的工作原理对于优化页面元素操作和提升Web性能至关重要。 接下来,我们转向HTTPBuilder。HTTPBuilder是...

    easyui-bootstrap-gh-pages.zip

    而Bootstrap则是Twitter开源的一个HTML、CSS和JS框架,以其响应式布局和移动设备优先的设计理念,成为了现代Web开发的首选工具之一。 在"easyui-bootstrap-gh-pages"这个项目中,我们可以看到这两者的融合,旨在...

    dynamic-linq-query-builder-master.zip

    - `src/`:源代码,包括JavaScript、CSS和模板文件,如果你需要对插件进行自定义或扩展,这里是你应该查看的地方。 - `docs/`:文档和示例,帮助你了解如何使用和配置jQuery-QueryBuilder。 - `test/`:测试用例,...

    前端项目-custom-elements-builder.zip

    通常包括编译、打包、压缩等步骤,可能使用了Webpack、Rollup或其他模块打包工具,将JavaScript、CSS、HTML资源整合并优化,以适应浏览器的运行环境。 4. **模块化**:项目中可能使用了ES6的模块系统(import/...

    前端开源库-hot-builder-cg.zip

    4. **配置管理**: 配置文件(如webpack.config.js)用于定义构建规则,包括入口、出口、加载器(loaders)、插件(plugins)等。 5. **ES6+ 语法支持**: 支持使用ES6+的语法,通过Babel转译成兼容浏览器的...

    flex-bootstrap.jar.zip

    如果遇到性能问题,可能需要优化CSS和JavaScript的加载,或者调整组件的渲染方式。 总的来说,“flex-bootstrap.jar.zip”提供的Flex Bootstrap库是一个强大的工具,它让Flex开发者能够利用Bootstrap的现代设计和...

    nwjs-v0.42.6-win-x64.rar

    NW.js(原名Node-Webkit)是一个强大的开源项目,它允许开发者利用JavaScript、HTML和CSS来创建桌面应用程序,同时具备Node.js的后端能力。这个软件包的主要用途是将基于Web技术的应用程序打包成可执行的.exe文件,...

    arcgis-experience-builder-1.9.zip

    这些小部件可以是JavaScript代码,也可以是基于Web技术如HTML、CSS和JavaScript的完整应用程序。这种开放的架构让开发者有机会创新,实现独一无二的应用解决方案。 总的来说,ArcGIS Experience Builder 1.9是一个...

    electron-quick-start-master.rar

    `index.html`是应用的入口网页,`index.css`负责样式,而`index.js`则可能包含与用户交互的JavaScript代码。 3. **`package.json`**:这是Node.js项目的标准配置文件,包含了项目的元数据,如名称、版本、依赖项等...

    Node.js-electron-builder一个完整的解决方案来打包和构建一个准备好分发的Electron应用

    Electron 是一个允许开发者使用 JavaScript、HTML 和 CSS 来构建跨平台的桌面应用的框架,而 Electron-builder 是一套强大的构建和打包工具,它简化了 Electron 应用的构建、打包和分发。 在描述中提到的“一个...

    Burger-Builder-React.js-

    《构建Burger Builder应用——基于React.js的实践详解》 在现代Web开发中,React.js以其组件化、高效渲染等特点,已经成为构建用户界面的首选框架之一。本项目“Burger-Builder-React.js-”正是一个利用React.js...

    import_word_to_html-master.rar_javascript

    JavaScript,作为Web开发的主流语言,不仅可以用于前端交互,还可以在服务器端(如Node.js环境)进行文件操作。 这个项目可能包含了一个或多个脚本,用于读取Word文档,解析其内容,并将其转换成HTML代码,以便在...

    builder-amd-css:在 Node.js 上动态生成 AMD 模块化项目的 CSS 包

    为什么是builder-amd-css? 使用builder-amd-css生成使用css!的 AMD 模块化项目的 CSS 包css! 插件定义。 它非常适合使用构建包的应用程序。 它不能替代像这样的 css 插件。 用法 npm 安装 builder-amd-css var...

    前端开源库-swint-builder-css

    1. **安装**: 首先需要安装Node.js环境,然后通过npm(Node Package Manager)安装Swint-Builder-CSS,命令如下: ``` npm install --save-dev swint-builder-css ``` 2. **配置**: 创建一个配置文件(如`...

    machine-builder.github.io:我的实际网站

    在给定的信息中,标题和描述提及的是...为了深入了解该网站的具体实现,需要查看"machine-builder.github.io-main"这个压缩包文件的内容,包括HTML、CSS、JavaScript文件以及可能的配置文件(如Jekyll的_config.yml)。

    builder-jquery-css:在Node.js上即时生成jQuery项目CSS捆绑包(JS注释定义CSS deps + AMD定义JS deps)

    使用builder-jquery-css生成jQuery项目CSS捆绑包,该项目使用诸如//&gt;&gt; css.&lt;name&gt;: files类的JS注释来定义其CSS依赖项,并使用AMD定义来定义其JS依赖项。 对于使用构建捆绑包的应用程序来说,它是理想的选择。 ...

Global site tag (gtag.js) - Google Analytics