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` 是一个非常流行的框架,它允许开发者使用 JavaScript、HTML 和 CSS 来构建跨平台的桌面应用程序。`Electron Builder` 是一个完整的解决方案,用于构建、打包和发布 Electron 应用程序,...
Electron是一个开放源代码框架,允许开发者使用JavaScript、HTML和CSS来构建跨平台的桌面应用程序。当开发者使用Electron完成应用程序开发后,通常会想要将这些应用程序打包成可执行文件(.exe),以便在Windows平台...
Electron是一个开源框架,允许开发者使用JavaScript、HTML和CSS来构建跨平台的桌面应用程序。它结合了Chromium和Node.js,使得Web开发者可以利用已有的技能栈开发原生应用。然而,当使用NSIS来打包Electron应用时,...
"Swint-Builder-CSS" 是一个专门为前端开发者设计的开源构建工具,它专注于CSS的构建流程,旨在简化和优化CSS开发过程中的编译、压缩、合并等任务。这个库可以帮助开发者更高效地管理和维护他们的样式表,提高前端...
在JavaScript中,`querySelector`和`querySelectorAll`方法就是基于CSS选择器来选取DOM元素的。理解CSS选择器的工作原理对于优化页面元素操作和提升Web性能至关重要。 接下来,我们转向HTTPBuilder。HTTPBuilder是...
而Bootstrap则是Twitter开源的一个HTML、CSS和JS框架,以其响应式布局和移动设备优先的设计理念,成为了现代Web开发的首选工具之一。 在"easyui-bootstrap-gh-pages"这个项目中,我们可以看到这两者的融合,旨在...
- `src/`:源代码,包括JavaScript、CSS和模板文件,如果你需要对插件进行自定义或扩展,这里是你应该查看的地方。 - `docs/`:文档和示例,帮助你了解如何使用和配置jQuery-QueryBuilder。 - `test/`:测试用例,...
通常包括编译、打包、压缩等步骤,可能使用了Webpack、Rollup或其他模块打包工具,将JavaScript、CSS、HTML资源整合并优化,以适应浏览器的运行环境。 4. **模块化**:项目中可能使用了ES6的模块系统(import/...
4. **配置管理**: 配置文件(如webpack.config.js)用于定义构建规则,包括入口、出口、加载器(loaders)、插件(plugins)等。 5. **ES6+ 语法支持**: 支持使用ES6+的语法,通过Babel转译成兼容浏览器的...
如果遇到性能问题,可能需要优化CSS和JavaScript的加载,或者调整组件的渲染方式。 总的来说,“flex-bootstrap.jar.zip”提供的Flex Bootstrap库是一个强大的工具,它让Flex开发者能够利用Bootstrap的现代设计和...
NW.js(原名Node-Webkit)是一个强大的开源项目,它允许开发者利用JavaScript、HTML和CSS来创建桌面应用程序,同时具备Node.js的后端能力。这个软件包的主要用途是将基于Web技术的应用程序打包成可执行的.exe文件,...
这些小部件可以是JavaScript代码,也可以是基于Web技术如HTML、CSS和JavaScript的完整应用程序。这种开放的架构让开发者有机会创新,实现独一无二的应用解决方案。 总的来说,ArcGIS Experience Builder 1.9是一个...
`index.html`是应用的入口网页,`index.css`负责样式,而`index.js`则可能包含与用户交互的JavaScript代码。 3. **`package.json`**:这是Node.js项目的标准配置文件,包含了项目的元数据,如名称、版本、依赖项等...
Electron 是一个允许开发者使用 JavaScript、HTML 和 CSS 来构建跨平台的桌面应用的框架,而 Electron-builder 是一套强大的构建和打包工具,它简化了 Electron 应用的构建、打包和分发。 在描述中提到的“一个...
《构建Burger Builder应用——基于React.js的实践详解》 在现代Web开发中,React.js以其组件化、高效渲染等特点,已经成为构建用户界面的首选框架之一。本项目“Burger-Builder-React.js-”正是一个利用React.js...
JavaScript,作为Web开发的主流语言,不仅可以用于前端交互,还可以在服务器端(如Node.js环境)进行文件操作。 这个项目可能包含了一个或多个脚本,用于读取Word文档,解析其内容,并将其转换成HTML代码,以便在...
为什么是builder-amd-css? 使用builder-amd-css生成使用css!的 AMD 模块化项目的 CSS 包css! 插件定义。 它非常适合使用构建包的应用程序。 它不能替代像这样的 css 插件。 用法 npm 安装 builder-amd-css var...
1. **安装**: 首先需要安装Node.js环境,然后通过npm(Node Package Manager)安装Swint-Builder-CSS,命令如下: ``` npm install --save-dev swint-builder-css ``` 2. **配置**: 创建一个配置文件(如`...
在给定的信息中,标题和描述提及的是...为了深入了解该网站的具体实现,需要查看"machine-builder.github.io-main"这个压缩包文件的内容,包括HTML、CSS、JavaScript文件以及可能的配置文件(如Jekyll的_config.yml)。
使用builder-jquery-css生成jQuery项目CSS捆绑包,该项目使用诸如//>> css.<name>: files类的JS注释来定义其CSS依赖项,并使用AMD定义来定义其JS依赖项。 对于使用构建捆绑包的应用程序来说,它是理想的选择。 ...